Question

据我所知，CSS加载器输出CommonJS，这与Webpack的某些优化功能不兼容。有没有办法制作CSS加载程序输出ES模块（import / export）？

编辑：

ES模块会发生以下情况：

main.js

import { FOO } from './module';
console.log(FOO);

输出

var FOO = 'foo';
console.log(FOO);

使用CSS加载程序：

main.js

import { foo } from './styles.scss';
console.log(foo);

输出

38: (function(module, exports, __webpack_require__) {
    module.exports = {"foo":"a"};
}),
...
var styles = __webpack_require__(38);
console.log(test["foo"]);

Answer 1

为此尝试使用post-css loader：

$ npm install -D postcss-loader

然后在您的 webpack.config.js 中：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          { loader: 'css-loader', options: { importLoaders: 1 } },
          'postcss-loader'
        ]
      }
    ]
  }
}

使CSS加载程序输出ES模块？

1 个答案: