我的 scss 代码没有在 CSS 中使用自动前缀进行解析

Question

我的 scss 代码无法在 CSS 中使用自动前缀进行解析。我使用 Webpack 4。我试过这个 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 中使用自动前缀进行解析

My scss code does not parse in CSS with auto-prefix

webpack

autoprefixer