2020-04-10 | React, Webpack

使用react脚手架下的webpack配置局部css样式

这一次配置webpack和以往有区别，之前都是自己编写react来进行配置webpack，这一次是使用react脚手架搭建，在网上找了很多资料都没有找到相关的配置。经过不断的尝试，最后尝试出一种方法，具体步骤如下所示。

首先在项目中找到node_modules文件夹，然后再在里面找到react-scripts文件夹，找到它的config配置文件夹，然后在里面找到webpack.config.js文件，如图所示：
我们打开webpack.config.js文件，然后ctrl+f输入css-loader找到相应的位置，如下图所示：
我们注释掉相关的内容，然后添加如下所示的内容：

代码贴在下面：
1
2
3
4
5
6
7
{
loader: require.resolve('css-loader'),
options: {
modules: true,
localIdentName: '[name]_[local]___[hash:base64:5]',
}
},
在这里解释一下相关内容：a. 在options选项中添加modules:true表示启用css模块；b. localIdentName表示配置生成资源的标识符名称，这这里你可以配置你喜欢的名称。

注意：当你配置完webpack.config.js文件之后，记得一定一定一定要重启，否则不会有效果的。

针对于上面的配置，你肯定很好奇输出是一个什么样子的，接下来我就具体来实现一个简单的例子。
a. 首先我们创建一个Test.js文件，Test.js文件里面写入如下所示代码：

import React from 'react'
import test from '../styles/test.css'
console.log(test) // {title: "test_title___xvQHx"}
class Test extends React.Component {
  render () {
    return (
      <div>
        <p className={test.title}>我是test下面的p标签</p>
      </div>
    )
  }
}
export default Test

b. 接着在src文件夹下面创建一个styles文件夹，然后在styles文件夹下面创建一个test.css文件，test.css文件里面写入.title {color: red;}
c. 接着为了区分我们的css模块是否生效了，我们在App.js文件中写入一个p标签，然后整体的代码如下所示：

import React from 'react';
import Test from './components/Test'
function App() {
  return (
    <div>
       <p className='title'>我是app下面的p标签</p>
       <Test></Test>
    </div>
  )
}
export default App;

整体内容写好之后，我们打开终端，输入命令:yarn start启动项目，将浏览器下的控制台打开，显示如下图所示：

在这里我们就发现我们打印出test变量它是一个对象，里面对应了我们css中写的内容，title属性对应的值就是我们在webpack.config.js文件中我们配置的内容。
关于在css中写样式，我们需要注意的是css模块化只针对于类选择器和Id选择器，它不会将标签选择器模块化，具体的例子如下所示：
当我们在test.css文件中分别写上类选择器、Id选择器、标签选择器，然后我们在浏览器控制台中打印test变量，然后得出相关的结果。
test.css文件中写入：
1
2
3
4
5
6
7
8
9
.title { /* 类选择器 */
color: red;
}
#my-title { /* Id选择器 */
border: 1px solid green;
}
p { /* 标签选择器 */
margin: 10px;
}
在控制台中显示如下图所示：
如果你使用sass的话，那么过程和上面是一样的，只是你创建的文件需改为test.scss文件即可。