Webpack 自动前缀不适用于建议的配置答案

【问题标题】：Webpack autoprefix not working with suggested configurationWebpack 自动前缀不适用于建议的配置
【发布时间】：2017-03-03 02:26:39
【问题描述】：

我正在尝试使用 sass-loader 和 autoprefixer 和 postcssloader 让 sass 编译与 webpack 一起工作。 sass 编译工作成功。但是，跟随自动前缀的文档不起作用：

将 PostCSS 加载器添加到 webpack.config.js。把它放在 css-loader 和 style-loader 之前。但是在sass-loader之后，如果你使用它。

所以只要 sass 工作，我就有了

loaders: [
    {
       test: /\.scss$/,
      loaders: ["style", "css", "sass"]
    }
],
sassLoader: {
    includePaths: [path.resolve(__dirname, "./build")]
}

但是看了上面的，好像我需要的是这样的东西。

'loaders': [
    {
        test: /\.scss$/,
        loaders: ["sass"]
    },      
    {
        test: /\.css$/,
        loaders: [
            'style-loader',
            'css-loader?modules&importLoaders=1',
            'postcss-loader'
        ]
    },
    {
        test: /\.scss$/,
        loaders: ["style", "css"]
    }
],
sassLoader: {
    includePaths: [path.resolve(__dirname, "./build")]
}

另外关于：

然后创建 postcss.config.js：

我已经制作了那个文件并把它放进去

module.exports = {
  plugins: [
    require('precss'),
    require('autoprefixer')
  ]
}

但是，我收到以下错误

“...加载样式”后的 CSS 无效：预期 1 个选择器或规则，在 /path/to/scss/index.scss 中是“var content = requi”

然后一切都崩溃了。这个配置有什么问题？

【问题讨论】：

标签： javascript css node.js sass webpack

【解决方案1】：

对于我的项目，我按以下顺序排列加载程序，以使其与scss 文件一起使用。

loaders: [
  'css-loader?modules&importLoaders=1',
  'postcss-loader',
  'sass-loader'
]

【讨论】：

【解决方案2】：

我发现做这样的事情很成功：

module.exports = {
   module: {
     loaders: [
       {
        test: /\.jsx$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        query: { presets: ["es2015", "stage-0", "react", "react-hmre" ]}
       },
       { 
        test: /\.scss$/, 
        loaders: ["style-loader", "css-loader", "postcss-loader", "sass-loader"] 
       }
     ]
   },
   postcss: function() {
     return [
       require('precss'),
       require('autoprefixer')
     ];
   }
};

【讨论】：