摘要:本篇教程介绍了HTML+CSS入门 详解CSS-loader配置,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门。
本篇教程介绍了HTML+CSS入门 详解CSS-loader配置,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门。
<
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]‘时,结果如下:
本文由职坐标整理发布,欢迎关注职坐标WEB前端HTML/CSS频道,获取更多HTML/CSS知识!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号