码迷,mamicode.com
首页 > Web开发 > 详细

详解css-loader配置

时间:2017-04-08 22:26:31      阅读:8069      评论:0      收藏:0      [点我收藏+]

标签:case   ade   .com   min   style   import   默认   默认值   span   

作用

css-loader用于将css文件打包到js中, 常常配合style-loader一起使用,将css文件打包并插入到页面中。如下:

{
    test: /\.css$/,
    use: [
        {
            loader: ‘style-loader‘
        },
        {
            loader: ‘css-loader‘,
            options: {
                root: ‘/‘, //修改css中url指向的根目录, 默认值为/, 对于绝对路径, css-loader默认是不会对它进行处理的
                modules: false, //开启css-modules模式, 默认值为flase
                localIdentName: ‘[name]-[local]-[hash:base64:5]‘, //设置css-modules模式下local类名的命名
                minimize: false, //压缩css代码, 默认false
                camelCase: false, //导出以驼峰化命名的类名, 默认false
                import: true, //禁止或启用@import, 默认true
                url: true, //禁止或启用url, 默认true
                sourceMap: false, //禁止或启用sourceMap, 默认false
                importLoaders: 0, //在css-loader前应用的loader的数目, 默认为0
                alias: {} //起别名, 默认{}
            }
        }
    ]
}

实现css类的作用域控制

默认情况下css文件中的类的作用, 第一种情况是不开启css-module模式


技术分享 => 技术分享


可以看出 :local(.hide)的变化,当在opitons中开启css-nodule, 并且设置 localIdentName: ‘[name]-[local]-[hash:base64:5]‘时,结果如下:


技术分享

 

详解css-loader配置

标签:case   ade   .com   min   style   import   默认   默认值   span   

原文地址:http://www.cnblogs.com/noper/p/6683182.html

(0)
(2)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!