webpack postcss.js.js不支持MJS(ES模块)?

hwamh0ep  于 2023-11-19  发布在  Webpack
关注(0)|答案(1)|浏览(273)

我在MJS(ES模块)中有webpack.js.js,我正在加载自定义postcss文件,使用:
第一个月

CJS custom-postcss-config.js:

  1. ... many other lines not important for now
  2. console.log("postcss file used");
  3. module.exports = (api) => {
  4. console.log("postcss function used");
  5. var colorMode = api.options.colorMode;
  6. return {
  7. plugins : [
  8. ...
  9. ['postcss-custom-properties', { importFrom : '.....my ' + colorMode + ' file.....', preserve : false }],
  10. ...
  11. ]
  12. }
  13. };

字符串

MJS custom-postcss-config.js:

  1. ... many other lines not important for now
  2. console.log("postcss file used");
  3. export default (api) => {
  4. console.log("postcss function used");
  5. var colorMode = api.options.colorMode;
  6. return {
  7. plugins : [
  8. ...
  9. ['postcss-custom-properties', { importFrom : '.....my ' + colorMode + ' file.....', preserve : false }],
  10. ...
  11. ]
  12. }
  13. };


当使用项目作为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配置导出为函数。

nzkunb0c

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:

  1. ... many other lines not important for now
  2. console.log("postcss file used");
  3. export default (colorMode) => { // note that "api" param changes directly to colorMode
  4. console.log("postcss function used");
  5. return {
  6. plugins : [
  7. ...
  8. ['postcss-custom-properties', { importFrom : '.....my ' + colorMode + ' file.....', preserve : false }],
  9. ...
  10. ]
  11. }
  12. };

字符串
顺便说一下,“postcss-custom-properties”现在不支持importFrom,所以我实际上使用了“@csstools/postcss-global-data”。

展开查看全部

相关问题