使用 css 和 scss 文件的 webpack 配置答案

【问题标题】：webpack config to use both css and scss files使用 css 和 scss 文件的 webpack 配置
【发布时间】：2020-04-10 14:34:32
【问题描述】：

我想在我的 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'] })]
    }
  }
]

【问题讨论】：

标签： webpack

【解决方案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

【讨论】：

什么是自动前缀？有其他选择吗？
@Algorythmic github.com/postcss/autoprefixer 这里是自动前缀的链接。我不知道有任何替代方案

【解决方案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',
              })
            : '',
    ],
};

【讨论】：