Webpack 如何在网页包中使用POSTSS加载器和sass加载器

我正在尝试构建一个网页包配置，它可以传输我的sass并利用postsss autoprefixer插件

在研究并尝试了各种解决方案后，我提出了以下设置：

webpack.config.js:

...
{
    test:  /\.(sa|sc|c)ss$/,
    exclude: [/node_modules/, /css/],
    use: [
        MiniCssExtractPlugin.loader,
        {
            loader: 'css-loader',
            options: {
                importLoaders: 1,
                url: false,
            }
        },
        {
            loader: 'postcss-loader',
            options: {
                config: {
                    path: 'postcss.config.js'
                }
            }
        },
        'sass-loader',
    ]
}
...

module.exports = {
    plugins: [
        require('autoprefixer')({
            overrideBrowserslist: ['last 2 versions']
        })
    ]
}

postsss.config.js:

...
{
    test:  /\.(sa|sc|c)ss$/,
    exclude: [/node_modules/, /css/],
    use: [
        MiniCssExtractPlugin.loader,
        {
            loader: 'css-loader',
            options: {
                importLoaders: 1,
                url: false,
            }
        },
        {
            loader: 'postcss-loader',
            options: {
                config: {
                    path: 'postcss.config.js'
                }
            }
        },
        'sass-loader',
    ]
}
...

module.exports = {
    plugins: [
        require('autoprefixer')({
            overrideBrowserslist: ['last 2 versions']
        })
    ]
}

运行此操作时，我收到以下错误：

ERROR in ./themes/kredslob/scss/main.scss 1:0
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> @import "partials/mixins";
| @import "footer";
| @import "header";

这是有道理的，因为POSTSS没有配置插件来正确处理导入。然后，我尝试更改

postss-loader

和

sass-loader

的顺序，以便在postss-loader处理供应商前缀之前，让sass-loader处理导入和其他非标准css功能。因此，我的设置更改为：

...
'sass-loader',
{
    loader: 'postcss-loader',
    options: {
        config: {
            path: 'postcss.config.js'
        }
    }
},
...

但是我仍然收到与前面描述的相同的错误

---

如何正确配置此设置？

我不确定我在这里所说的对您有多大帮助，因为我从未使用过PostSS autoprefixer插件。但这里是这样的：

我的网页包配置中的模块属性通常如下所示：

module: {
        rules: [
            {
                test: /\.s?css$/i,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader','sass-loader']
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: "babel-loader"
            }
        ]
    },

然后，我倾向于使用一个单独的POSTSS配置文件：

module.exports = {
    plugins: ['postcss-preset-env']
}

还有一个

.browserslistrc

：

last 2 versions
> 0.5%
IE 10

如果我没有弄错的话，postcss加载器在默认情况下会查找配置文件。无需添加路径指向它的选项。此外，POSTSS预设环境在某种程度上还包括autoprefixer

---

现在，值得一提的是，broswerslist引入了一个bug，它可以防止自动重新加载。为了继续利用它，您只能在为生产构建时设置它。

谢谢您的回复。我成功了。@MikeHawkins我很高兴能帮上忙：）