如何在webpack中跨文件使用程序变量和@ rules

Question

我正在尝试使用precss来获得类似于sass的功能，在这里我可以@定义全局文件中的mixins/extends和$variables，然后我可以从其他文件中引用它们，但是我似乎无法弄清楚webpack的配置。示例：

variables.css

$grey: #ddd;

@define-extend box {
  height: 100px;
  width: 100px;
}

styles.css

@import variables.css

.black-box {
  @extends box;
  background-color: $grey;
}

我的webpack2配置非常简单：

const precss = require('precss');
const postCssImport = require('postcss-import');

const postcssOptions = {
  options: {
    sourceMap: 'inline',
    plugins: () => [
      precss,
      postCssImport(),
    ],
  },
};

module.exports = {
  ... 
  module: {
    rules: [
      {
        test: /\.css$/
        use: [
          'style-loader',
          {
          loader: 'css-loader',
          options: {
            modules: true,
            sourceMap: true,
            camelCase: 'dashesOnly',
            importLoaders: 2,
            localIdentName: '[name]__[local]__[hash:base64:5]',
          },
        },
        'resolve-url-loader',
          {
            loader: 'postcss-loader',
            options: postcssOptions,
          },
        ],
      },
    ],
  },
  ...
};

我是不是遗漏了什么让它工作的东西？谢谢。

Answer 1

我认为导入postCssImport需要在preCSS之前运行。