自动前缀在 webpack 中不起作用

Question

我正在尝试使用webpack设置引导程序，但是当我运行构建时，它没有给出CSS的自动前缀版本。

在 custom.scss 中，我添加了我的自定义项，然后从我的节点模块导入了引导程序。

这是我的webpack.config.js

module.exports = {
entry: {
scss: ['./src/scss/custom.scss']
},
module: {
rules: [    
{
test: /.scss$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [{
loader: 'css-loader',
options: {
minimize: false,
autoprefixer: true,
sourceMap: true,
importLoaders: 1
}
}, 'postcss-loader', 'sass-loader']
})
}
]
},
plugins: [
new ExtractTextPlugin({
filename: './assets/css/style.css',
disable: false,
allChunks: true
}),
]
}

这是我的postcsss.config.js

module.exports = {
plugins: function () {
return [
require('precss'),
require('autoprefixer')
];
}
}

当我构建时，所有的引导 css 都被添加到 style 中.css但它没有提供自动前缀的 css 文件。供应商前缀是必须的，因为它是 BS4，所以 flex 在那里。

谢谢。

Answer 1

这是我对引导 v4 的配置

webpack.config.js (用于生产(

test: /.scss$/,
exclude: /node_modules/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader!resolve-url-loader!postcss-loader!sass-loader',
}),

webpack.config.js (用于开发(

test: /.scss$/,
exclude: /node_modules/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
sourceMap: true,
},
},
{
loader: 'resolve-url-loader',
},
{
loader: 'postcss-loader',
options: {
sourceMap: true,
},
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
},
},
],

postcss.config.js

module.exports = {
plugins: [
require('postcss-cssnext')({
browserslist: [
'> 1%',
'last 2 versions',
],
}),
],
};

在我的main.scss中，我像这样导入引导程序

@import '~bootstrap/scss/bootstrap';

波浪号 (~( 指示 webpack 从node_modules导入

如果您打算使用上述配置，您还需要安装一些软件包

• postcss-cssnext
• 解析网址加载器

我使用post-cssnext而不是autoprefixer。