preface

I transferred from Vue to learn React. When I was used to writing modular CSS via Scoped, I felt very comfortable. However, when I used React, I needed to configure it by myself

The effect

// todolist.scss
.todo_list{
    color: green;
}
Copy the code
// TodoList.jsx
import React from 'react'
import Style from './todolist.scss'
class TodoList extends React.Component {
    constructor(props) {
        super(props)
        console.log(1)
    }
    render() {
        return (
            <div className={Style.todo_list}>Hello World</div>)}}export default TodoList

Copy the code

Package generated CSS format [file name]__[class name]__[five-digit hash]

code

  1. performnpm run ejectDisplay the configuration file (note: this is not reversible)
  2. yarn add node-sass --dev
  3. Into the/config/webpack.config.jsThe lookupsass-loaderaddmodules:{localIdentName:'[name]__[local]__[hash:5]'}
{
 test: sassRegex,
 exclude: sassModuleRegex,
 use: getStyleLoaders(
   {
     importLoaders: 3.sourceMap: isEnvProduction && shouldUseSourceMap,
     modules: {localIdentName:'[name]__[local]__[hash:5]'}},'sass-loader'),}Copy the code
  1. Start or restart the project