Question

我正在尝试使用precss来获得像sass一样的功能，我可以在全局文件中@define 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之前运行。

如何使用webpack在文件中使用precss变量和@规则

1 个答案: