Question

我的scss代码没有在CSS中使用自动前缀进行解析。我使用的是Webpack4。我尝试过使用postcss.config.js。

module: {
    rules: [
        {
            test: /\.(sa|sc|c)ss$/,
            use: [
                MiniCssExtractPlugin.loader,
                { loader: "css-loader", options: {} },
                {
                    loader: "postcss-loader",
                    options: {
                        ident: 'postcss',
                        plugins: [
                            require('autoprefixer')({
                                'browsers': ['> 1%', 'last 2 versions']
                            }),
                            require('cssnano')({ preset: 'default' })
                        ]
                    }
                },
                { loader: "sass-loader", options: {} }
            ]
        }

    ]
},

Answer 1

在importLoaders中添加css-loader选项，以指示在此之前还有另外两个加载程序：

module: {
    rules: [
        {
            test: /\.(sa|sc|c)ss$/,
            use: [
                MiniCssExtractPlugin.loader,
                { loader: 'css-loader', options: { importLoaders: 2 } },
                {
                    loader: "postcss-loader",
                    options: {
                        ident: 'postcss',
                        plugins: [
                            require('autoprefixer')({
                                'browsers': ['> 1%', 'last 2 versions']
                            }),
                            require('cssnano')({ preset: 'default' })
                        ]
                    }
                },
                { loader: "sass-loader", options: {} }
            ]
        }

    ]
},

我的scss代码无法在带有自动前缀的CSS中解析

1 个答案: