自动前缀在 webpack 中不起作用

Posted 2023-03-17

【中文标题】自动前缀在 webpack 中不起作用

【英文标题】：Autoprefixer not working in webpack

【发布时间】：2018-11-09 21:54:39

【问题描述】：

我正在尝试使用 web pack 设置引导程序，但在我运行构建时它没有提供 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 在那里。

谢谢。

【参考方案1】：

这是我对 bootstrap 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。