webpack中与样式相关的loader

最新推荐文章于 2023-08-03 20:05:34 发布

一路斜阳

最新推荐文章于 2023-08-03 20:05:34 发布

阅读量562

点赞数

分类专栏： Webpack 文章标签： loader

本文链接：https://blog.csdn.net/zhaoruda/article/details/74157544

版权

Webpack 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

css-loader:该loader可以实现在js中以import/require的方式引入css。
style-loader：该loader可以实现在html中以style的形式嵌入css。
less-loader：该loader将less编译为css。
sass-loader：该loader将sass编译为css。
postcss-loader：该loader可以为我们样式添加浏览器兼容性前缀等。使用该loader仅仅在webpack.config.js中引入是没有用的，我们还需要在webpack.config.js同级目录下创建postcss.config.js，其内容如下：

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

基于上述loader，配置如下：

    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: "style-loader!css-loader!postcss-loader"
            }
        ]
    }