我试图让自动添加CSS前缀的工具正常工作,但是一直很沮丧。
这是我的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')()
]
}
目前我的 package.json 中保存了我的 browserslist 选项
如您所见,我尝试使用 webpack 文件来保存 postcss-loader 的配置设置,也尝试创建一个单独的配置文件。
我尝试移动 browserslist 但我认为这不是问题,因为我运行 npx browserslist
并且能够看到已选中的浏览器列表。
我的 webpack 配置中 postcss-loader
声明在 css-loader
之后,在 sass-loader
之前。
当我运行webpack时,我的控制台中也没有任何错误,所以不确定发生了什么事情,但真的需要一些帮助!
npx browserslist
命令,可以看到应该受影响的浏览器。 - doublea