我在MJS(ES模块)中有webpack.js.js,我正在加载自定义postcss文件,使用:
第一个月
CJS custom-postcss-config.js:
... many other lines not important for now
console.log("postcss file used");
module.exports = (api) => {
console.log("postcss function used");
var colorMode = api.options.colorMode;
return {
plugins : [
...
['postcss-custom-properties', { importFrom : '.....my ' + colorMode + ' file.....', preserve : false }],
...
]
}
};
字符串
MJS custom-postcss-config.js:
... many other lines not important for now
console.log("postcss file used");
export default (api) => {
console.log("postcss function used");
var colorMode = api.options.colorMode;
return {
plugins : [
...
['postcss-custom-properties', { importFrom : '.....my ' + colorMode + ' file.....', preserve : false }],
...
]
}
};
型
当使用项目作为CJS时,console.log("postcss file used")
和console.log("postcss function used")
都运行得很好。但是当将项目切换到MJS时(类型:package.json中的模块+文件中的适当更改,现在console.log("postcss file used")
运行但console.log("postcss function used")
不运行。我不知道为什么,控制台上没有错误,webpack编译成功,但最终的CSS捆绑包根本没有经过postcss处理。我现在使用的所有包都是最新版本。Postcss加载器和cosmiconfig过去都有问题,但我看到提交晚了1-2年,他们添加了对MJS(ES模块)的支持。
请注意,由于传递参数(亮/暗模式),我将webpack配置和postcss配置导出为函数。
1条答案
按热度按时间nzkunb0c1#
感谢从2017年起在此提及https://github.com/webpack-contrib/postcss-loader/issues/192#issuecomment-300287617
第一个月
我添加了webpack配置
import CustomPostcssConfig from './custom-postcss-config.js';
并将加载器代码更改为:{ loader : 'postcss-loader', options : { postcssOptions : CustomPostcssConfig(colorMode) } }
个现在我只能在webpack配置和postcss配置中使用MJS代码,postcss处理就像CJS项目版本一样工作得很好。
现在是MJS custom-postcss-js.js:
字符串
顺便说一下,“postcss-custom-properties”现在不支持
importFrom
,所以我实际上使用了“@csstools/postcss-global-data”。