由于CSS没有作用域的概念,因此昨天那种在组件中引入样式表的方法会使得该样式表在整个项目中都生效。如果我们想只让导入的样式表在当前作用域内有效,需要为其启用模块化。
在webpack.config.js
中的css-loader
后面追加参数:
{
test: /\.css$/,
use: ["style-loader", "css-loader?modules"]
}
styles.css
中有一条.title{}
的类选择器的样式规则。
导入样式表:import cssobj from "@/css/styles.css"
使用样式表中的规则:
只能为类和ID选择器启用模块化,标签选择器不能被模块化。