webpack 处理css如何自动加上浏览器前缀?

发布于 2022-09-05 10:33:49 字数 2267 浏览 22 评论 0

module.exports = {
    // js 入口文件
    entry: {
        index: './src/js/index.js',
        about: './src/js/about.js',
        pages: './src/js/pages.js'
    },
    output: {
        path: path.join(__dirname, 'dist'),
        publicPath: '/',
        filename: "js/[name].[hash].bundle.js"
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: CssLoader.extract({
                fallback: "style-loader",
                use: "css-loader"
            })
        }, {
            test: /\.scss$/,
            use: CssLoader.extract({
                fallback: 'style-loader',
                use: ['css-loader', 'sass-loader', {
                    loader: 'postcss-loader',
                    options: {
                        plugins: [autoprefixer({
                            browsers: ['last 2 versions', 'Android >= 4.0', 'iOS 7'],
                            remove: true,
                        })]
                    }
                }],
                allChunks: true
            })
        }, {
            test: /\.html$/,
            loader: "html-loader?attrs=img:src img:data-src"
        }, {
            test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
            loader: 'file-loader?name=./fonts/[name].[ext]'
        }, {
            test: /\.(png|jpg|gif)$/,
            loader: 'url-loader?limit=8192&name=./img/[hash].[ext]'
        }]
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendors', 
            chunks: ['index', 'pages', 'about'], 
            minChunks: 3 
        }),
        CssLoader,
        ...
    ],
    devServer: {
        contentBase: './',
        host: 'localhost',
        port: 9090, //默认8080
        inline: true, //可以监控js变化
        hot: true, //热启动
    }
}

然后生成的css文件并没有跑autoprefixer,没有自动加上浏览器前缀。
求解。

about.css :

@import url('../scss/about.scss');

about.scss :

h2{
    color: #eee;
    background: #333;
    transform: rotate(-45deg)
}

生成的 about.css :

h2{
    color: #eee;
    background: #333;
    transform: rotate(-45deg)
}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

女中豪杰 2022-09-12 10:33:50
{
    test: /\.(scss|sass|css)$/,
    loader: ExtractTextPlugin.extract({fallback: "style-loader", use: "css-loader?importLoaders=2!postcss-loader!sass-loader"})
}

主要是配置 css-loader 后的 importLoaders 参数,表示 css-loader 在处理import的资源前,需要加载哪个加载器。

参数意思是:

The query parameter importLoaders allows to configure how many loaders before css-loader should be applied to @imported resources.

官方示例:

{
  test: /\.css$/,
  use: [
    'style-loader',
    {
      loader: 'css-loader',
      options: {
        importLoaders: 1 // 0 => no loaders (default); 1 => postcss-loader; 2 => postcss-loader, sass-loader
      }
    },
    'postcss-loader',
    'sass-loader'
  ]
}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文