Question

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

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

这是我的webpack.config.js

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

这是我的postcsss.config.js

mysql> ALTER USER 'root'@'localhost' IDENTIFIED BY ''; 
mysql> flush privileges;

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

感谢。

Answer 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
决心-URL装载机

我使用了 autoprefixer 的 post-cssnext 。

Autoprefixer无法在webpack中运行

1 个答案: