webpack配置以同时使用css和scss文件

Question

我想在我的app.jsx中导入一个.css文件，其中包含一些特定于主题的代码，但是随后使用scss文件对组件进行样式设置。

我怎样才能做到这一点？这是我的webpack配置，仅适用于scss文件，我认为我可以放一个通配符，并且对两个都适用。

test: /\.(s?)css$/,
use: [
  {
    loader: 'style-loader',
    options: {
      hmr: true
    }
  },
  {
    loader: 'css-loader',
    options: {
      modules: true,
      importLoaders: 1,
      localIdentName: '[name]__[local]___[hash:base64:5]'
    }
  },
  {
    loader: 'sass-loader'
  },
  {
    loader: 'postcss-loader',
    options: {
      plugins: [autoprefixer({ browsers: ['last 3 versions'] })]
    }
  }
]

Answer 1

试试这个。我已经测试过了为我工作得很好。

{
    test: /\.(sa|sc|c)ss$/,
    use: [
            {
                loader: 'style-loader',
                options: {
                    hmr: true
                }
            },
            {
                loader: 'css-loader',
                options: {
                   modules: true,
                   importLoaders: 1,
                   localIdentName: '[name]__[local]___[hash:base64:5]',
                },
           },
           {
               loader: 'postcss-loader',
               options: {
                   plugins: [autoprefixer({ browsers: ['> 1%'] })]
               },
            },
            'sass-loader'
        ],
}

另外建议:不要使用“最后3个版本”，例如: plugins: [autoprefixer({ browsers: ['last 3 versions'] })]，它将包含许多无效的浏览器。 Check it here。
'> 1%' is better