Autoprefixer 不添加供应商前缀
Autoprefixer doesn't add vendor prefix
我认为我的 webpack 配置或 postcss 插件配置有问题。我的测试文件 'dist/main.css' 创建良好,但未添加供应商前缀。我尝试使用 css 属性 中列出的 npx autoprefixer --info
,但它仍然没有为我的 css 样式添加供应商前缀。下面是我的 webpack 文件。
// webpack.config.js
const path = require('path')
const webpack = require('webpack')
const dotenv = require('dotenv').config({ path: __dirname + '/.env' })
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const isDevelopment = process.env.NODE_ENV === 'development'
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
chunkFilename: '[id].js',
publicPath: ''
},
resolve: {
extensions: ['.js', '.jsx', '.scss', '.sass']
},
module: {
rules: [
{
test: /\.(js||jsx)$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /(\.css|scss)$/,
exclude: /node_modules/,
use: [
isDevelopment ?
{ loader: 'style-loader' }
:
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
modules: {
localIdentName: '[name]__[local]__[hash:base64:5]'
},
sourceMap: isDevelopment
}
},
{
loader: 'postcss-loader',
options: {
postcssOptions: {
config: true
},
sourceMap: isDevelopment
}
},
{
loader: 'sass-loader',
options: {
sourceMap: isDevelopment
}
},
]
},
{
test: /\.(png||jpe?g||gif)$/,
loader: 'url-loader?limit=10000&name=img/[name].[ext]'
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: __dirname + '/public/index.html',
filename: 'index.html',
inject: 'body'
}),
new webpack.DefinePlugin({
"process.env": JSON.stringify(dotenv.parsed)
}),
new MiniCssExtractPlugin()
],
devServer: {
compress: true,
port: 5050
}
}
这就是我为 postcss 插件
添加 autoprefixer 的方式
// postcss.config.js
module.exports = {
plugins: () => {
return [
require('autoprefixer')({
grid: true
})
]
}
}
这是我的浏览器列表
// package.json
...
"browserslist": [
"> 1%",
"last 5 versions"
]
提前致谢!
我之前也 运行 遇到过同样的问题。我不确定到底是什么问题,但是当我切换到使用此处提到的 postcss-preset-env
时 https://github.com/webpack-contrib/postcss-loader#autoprefixer (它说 autoprefixer
已添加到预设中,我们不需要单独添加),对我来说效果很好
安装后,您只需按如下方式切换postcss.config.js
:
const postcssPresetEnv = require('postcss-preset-env');
module.exports = {
plugins: [
postcssPresetEnv(),
],
}
我认为我的 webpack 配置或 postcss 插件配置有问题。我的测试文件 'dist/main.css' 创建良好,但未添加供应商前缀。我尝试使用 css 属性 中列出的 npx autoprefixer --info
,但它仍然没有为我的 css 样式添加供应商前缀。下面是我的 webpack 文件。
// webpack.config.js
const path = require('path')
const webpack = require('webpack')
const dotenv = require('dotenv').config({ path: __dirname + '/.env' })
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const isDevelopment = process.env.NODE_ENV === 'development'
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
chunkFilename: '[id].js',
publicPath: ''
},
resolve: {
extensions: ['.js', '.jsx', '.scss', '.sass']
},
module: {
rules: [
{
test: /\.(js||jsx)$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /(\.css|scss)$/,
exclude: /node_modules/,
use: [
isDevelopment ?
{ loader: 'style-loader' }
:
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
modules: {
localIdentName: '[name]__[local]__[hash:base64:5]'
},
sourceMap: isDevelopment
}
},
{
loader: 'postcss-loader',
options: {
postcssOptions: {
config: true
},
sourceMap: isDevelopment
}
},
{
loader: 'sass-loader',
options: {
sourceMap: isDevelopment
}
},
]
},
{
test: /\.(png||jpe?g||gif)$/,
loader: 'url-loader?limit=10000&name=img/[name].[ext]'
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: __dirname + '/public/index.html',
filename: 'index.html',
inject: 'body'
}),
new webpack.DefinePlugin({
"process.env": JSON.stringify(dotenv.parsed)
}),
new MiniCssExtractPlugin()
],
devServer: {
compress: true,
port: 5050
}
}
这就是我为 postcss 插件
添加 autoprefixer 的方式// postcss.config.js
module.exports = {
plugins: () => {
return [
require('autoprefixer')({
grid: true
})
]
}
}
这是我的浏览器列表
// package.json
...
"browserslist": [
"> 1%",
"last 5 versions"
]
提前致谢!
我之前也 运行 遇到过同样的问题。我不确定到底是什么问题,但是当我切换到使用此处提到的 postcss-preset-env
时 https://github.com/webpack-contrib/postcss-loader#autoprefixer (它说 autoprefixer
已添加到预设中,我们不需要单独添加),对我来说效果很好
安装后,您只需按如下方式切换postcss.config.js
:
const postcssPresetEnv = require('postcss-preset-env');
module.exports = {
plugins: [
postcssPresetEnv(),
],
}