Version Details:

{" name ":" the react - study ", "version" : "0.1.0 from", "private" : true, "dependencies" : {" @ Babel/core ": "7.12.3", "@ PMMMWH/react - refresh - webpack - plugin" : "0.4.3", "@ SVGR/webpack" : "5.5.0", "@ testing - library/jest - dom" : "^ 5.14.1," "@ testing - the library/react" : "^ 11.2.7", "@ testing - the library/user - the event" : "^ 12.8.3", "@ typescript - eslint/eslint - plugin" : "^ 4.5.0", "@ typescript - eslint/parser" : "^ 4.5.0", "antd" : "^ 4.16.12 axios", ""," ^ 0.21.1 ", "Babel - eslint" : "^ 10.1.0", "Babel - jest" : "^ 26.6.0", "Babel - loader" : "8.1.0", "Babel - plugin - named - asset - the import" : "^ 0.3.7", "Babel - preset - react - app" : "^ 10.0.0", "BFJ" : "^ 7.0.2 camelcase", ""," ^ 6.1.0 ", "case - sensitive - paths - webpack - plugin" : "2.3.0", "classnames" : "^ 2.3.1", "CSS - loader" : "" dotenv 4.3.0", ":" 8.2.0 ", "dotenv - expand" : "5.1.0", "eslint" : "^ 7.11.0", "eslint - config - react - app" : "^ 6.0.0 eslint - plugin -", "flowtype" : "^ 5.2.0", "eslint - plugin - import" : "^ 2.22.1", "eslint - plugin - jest" : "^ 24.1.0 eslint", "- the plugin - JSX - a11y" : "^ 6.3.1", "eslint - plugin - react" : "^ 7.21.5", "eslint - plugin - react - hooks" : "^ 4.2.0 eslint", "- the plugin - testing - library", "^ 3.9.2", "eslint - webpack - plugin" : "^ 2.5.2", "file - loader" : "6.1.1," "the fs - extra" : "^ 9.0.1", "HTML - webpack - plugin" : "4.5.0", "identity - obj - proxy" : "3.0.0", "jest" : "26.6.0 jest -", "circus" : "26.6.0", "jest - resolve" : "26.6.0", "jest - watch - the typeahead" : > optimize- CSS-assets-webpack-plugin: > optimize- CSS-assets-webpack-plugin: > optimize- CSs-assets-webpack-plugin: > optimize- CSs-assets-webpack-plugin: > optimize- CSs-assets-webpack-plugin: "1.6.4", "postcss flexbugs - fixes" : "2", "postcss - loader" : "3.0.0", "postcss - normalize" : "8.0.1," "postcss - preset - env" : "6.7.0", "postcss - safe - parser" : "5.0.2", "prompts" : "2.4.0" and "react" : "^ 17.0.2", "the react - app - polyfill" : "^ 2.0.0", "the react - dev - utils" : "^ 11.0.3", "the react - dom" : "^ 17.0.2", "the react - refresh" : "^ 0.8.3 react - the router -", "dom" : "^ 5.2.0", "resolve" : "1.18.1", "resolve - url - loader" : "^ 3.1.2", "sass - loader" : "^ 10.0.5 semver", "" :" 7.3.2 ", "style - loader" : "1.3.0", "terser - webpack - plugin" : "holdings", "ts - PNP" : "1.2.0", "url - loader" : "4.4.1", "web - vitals" : "^ 1.1.2", "webpack" : "4.44.2", "webpack - dev - server" : 3.11.1 ""," webpack - manifest - plugin ":" 2.2.0 ", "workbox - webpack - plugin" : "5.1.4 ensuring"}, "scripts" : {" start ": "node scripts/start.js", "build": "node scripts/build.js", "test": "node scripts/test.js" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [" > 0.2% ", "not dead", "not op_mini all"], "development" : [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "jest": { "roots": [ "<rootDir>/src" ], "collectCoverageFrom": [ "src/**/*.{js,jsx,ts,tsx}", "!src/**/*.d.ts" ], "setupFiles": [ "react-app-polyfill/jsdom" ], "setupFilesAfterEnv": [ "<rootDir>/src/setupTests.js" ], "testMatch": [ "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}", "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}" ], "testEnvironment": "jsdom", "testRunner": "D:\\react-study\\node_modules\\jest-circus\\runner.js", "transform": { "^.+\\.(js|jsx|mjs|cjs|ts|tsx)$": "<rootDir>/config/jest/babelTransform.js", "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js", "^(? ! .*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js" }, "transformIgnorePatterns": [ "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$", "^.+\\.module\\.(css|sass|scss)$" ], "modulePaths": [], "moduleNameMapper": { "^react-native$": "react-native-web", "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy" }, "moduleFileExtensions": [ "web.js", "js", "web.ts", "ts", "web.tsx", "tsx", "json", "web.jsx", "jsx", "node" ], "watchPlugins": [ "jest-watch-typeahead/filename", "jest-watch-typeahead/testname" ], "resetMocks": true }, "babel": { "presets": "The react - app"}, "devDependencies" : {" stylus ":" ^ 0.54.8 ", "stylus - loader" : "^ 3.0.2"}}Copy the code

Run NPM run eject to expose the built-in configuration files

Configure stylus

TypeError: this.getOptions is not a function 

NPM I “stylus”: “^0.54.8″,” stylUS-Loader “: “^3.0.2” cause: my webpack version is “webpack”: “4.44.2”, and version incompatibility causes stylus error correction to: NPM I “stylus”: “^0.54.8″,” stylus-Loader “: “^3.0.2”

const stylusRegex = /\.styl$/; const stylusModuleRegex = = /\.module\.styl$/; // Write a json file like sassRegex and change it to stylusRegx {test: stylusRegex, exclude: stylusModuleRegex, use: getStyleLoaders( { importLoaders: 3, sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment, }, 'stylus-loader' ),Copy the code

2. Configure the Hash mode

In the eject webpack.config.js file

 {
              test: stylusRegex,
              use: getStyleLoaders({
                importLoaders: 3,
                sourceMap: isEnvProduction
                  ? shouldUseSourceMap
                  : isEnvDevelopment,
                modules:{
                  getLocalIdent:getCSSModuleLocalIdent
                }
              },
                'stylus-loader'
              ),
              sideEffects: true,

            }
Copy the code

SideEffects: sideEffects of file effects, can be array/Boolean

find

 modules:{
                  getLocalIdent:getCSSModuleLocalIdent
                }
Copy the code

The getCSSModuleLocalIdent

Path is:

Find and configure the parameters:

const className = loaderUtils.interpolateName(
    context,
    localName + '_' + hash,
    options
  );
Copy the code

Hash is the CSS style suffix as shown in the following figure:

This enables CSS modularity, mainly to prevent CSS renaming conflicts

Hash can also be used to define random numbers.

3. Optimize classNames styles

The introduction of

npm install classnames
Copy the code

Use in js

import {Component} from 'react'; import styles from './styl.styl'; import classNames from "classnames/bind"; const ctx = classNames.bind(styles); export default class Home extends Component { constructor(props) { super(props); this.state = { flag: true, } } componentDidMount() { } render() { const {flag} = this.state; return ( <div className={ctx('page', flag? 'p':'')}> classNames </div> ) } }Copy the code

In the stylus

.page
  width 400px
  height 400px
  color red
  background yellow

.p
  border-radius 40%
Copy the code

Current Directory: