我在尝试让自动前缀器工作时感到非常沮丧。
这是我的webpack.config.js
const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const config = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.(scss)$/,
use: [
MiniCssExtractPlugin.loader,
{ loader: "css-loader", options: {} },
{ loader: "postcss-loader", options: {} },
// {
// loader: "postcss-loader",
// options: {
// ident: "postcss",
// plugins: (loader) => [
// require('autoprefixer')({ browsers: ['defaults']})
// ]
// }
// },
{ loader: "sass-loader", options: {} }
]
},
{
test: /\.mp3$/,
use: {
loader: "file-loader"
}
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
}),
new MiniCssExtractPlugin({
filename: "main.css"
})
]
};
module.exports = config;
这是我的postcss.config.js
module.exports = {
plugins: [
require('autoprefixer')()
]
}
目前我的包.json保存着我的浏览器列表选项
正如你所看到的,我尝试使用 webpack 文件来保存 postcss-loader 的配置设置,并且我还尝试创建一个单独的配置文件。
我尝试过移动浏览器列表,但我认为这不是我运行的问题npx browserslist
我可以看到所选浏览器的列表。
My postcss-loader
我的 webpack 配置中的声明位于之后css-loader
和之前sass-loader
当我运行 webpack 时,我的控制台中也没有收到任何错误,所以不确定发生了什么,但确实需要一些帮助!