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

Question

我想.css在我的app.jsx中导入一个文件，其中包含一些主题特定的代码，但是随后使用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'] })]它会包含很多死浏览器。在这里检查。

'> 1%' 更好

Answer 2

您可以为 css 和 scss 文件编写不同的规则，其中您可以删除 css 文件的 sass 加载器。

test: /\.scss$/,
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'] })]
    }
  }
]


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

以下是我个人对 css 和 scss 文件的设置

webpack.config.js

{
                test: /\.css$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'style-loader',
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                            importLoaders: 2,
                        },
                    },
                    {
                        loader: 'resolve-url-loader',
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            sourceMap: true,
                        },
                    },
                ],
            },
            {
                test: /\.scss$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'style-loader',
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                            importLoaders: 3,
                        },
                    },
                    {
                        loader: 'resolve-url-loader',
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            sourceMap: true,
                        },
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true,
                        },
                    },
                ],
            },

postcss.config.js

module.exports = {
    plugins: [
        require('postcss-cssnext')({
            warnForDuplicates: false,
            features: {
                customProperties: false,
            },
        }),
        require('postcss-flexbugs-fixes')(),
        process.env.NODE_ENV === 'production'
            ? require('cssnano')({
                    preset: 'default',
              })
            : '',
    ],
};