使用sass+react如何使每个component组件引入的css文件互不影响？

Question

用的是create-react-app创建项目目录，然后使用sass --watch src:src监听sass文件的改动。

// SearchResult.js
import './SearchResult.css'

// SearchSelect.js
import './SearchSelect.css'

现在问题是两个component组件分别引了不同的css文件，但css文件中的样式是影响全局的。也就是SearchSelect.css里面写的样式会影响到SearchResult.css。请问如何该引入css文件，使它的样式只在引入它的组件里有效？

Answer 1

你可以在解析scss文件的时候更改css命名的规范啊，例如下面

loaders: [
                    "style-loader",
                    'css-loader?{"sourceMap":false,"modules":true,"localIdentName":"[name]_[local]_[hash:base64:3]"}',  //不可以显示背景图拍 
                    // ,"minimize":false
                    // "postcss-loader",  
                    "sass-loader?sourceMap",
                ]

这个是我个人的小项目这样配置的，主要是在localIdentName这个是webpack1不是2
2的写法也类似，你可以网上找找，至于你用的creat－react－app这个还真不知道怎么去配置解析scss