为普通样式表通过modules参数启用模块化

CSS样式表作用域冲突问题

由于CSS没有作用域的概念，因此昨天那种在组件中引入样式表的方法会使得该样式表在整个项目中都生效。如果我们想只让导入的样式表在当前作用域内有效，需要为其启用模块化。

CSS启用模块化

在webpack.config.js中的css-loader后面追加参数：

{
    test: /\.css$/,
    use: ["style-loader", "css-loader?modules"]
}

使用方法

styles.css中有一条.title{}的类选择器的样式规则。
导入样式表：import cssobj from "@/css/styles.css"
使用样式表中的规则：<div className={cssobj.title}>Hello</div>

注意事项

只能为类和ID选择器启用模块化，标签选择器不能被模块化。