Question

我尝试使用sass-loader和autoprefixer以及postcssloader使用sass编译来处理webpack。 sass编译工作成功。但是，以下自动修复的文档不起作用：

将PostCSS Loader添加到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')
  ]
}

但是，我收到以下错误

＆＃34之后的无效CSS ...加载样式＆＃34;：预期的1个选择器或at-rule，是＆＃34; var content = requi＆＃34;在/path/to/scss/index.scss

一切都破了。这个配置有什么问题？

Answer 1

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

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

Answer 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')
     ];
   }
};

Webpack autoprefix无法使用建议的配置

2 个答案: