由create-react-app的react項目使用局部css

為什么webpack項目中使用局部css

在項目中，尤其是大項目中，很可能因為使用相同的css，在vue中可以直接在style中加入scope屬性，而在create-react-app的react項目怎么實現這種局部的style呢

通過style-loader實現局部css

第一種方式通過style-loader的modules屬性

暴露出webpack配置 如果暴露過了 省略此步驟

npm run eject

修改配置

// config > webpack.config.dev.js


// style files regexes
const cssRegex = /\.css$/;
const useable = /\.use(able)?\.css$/;  // 添加 匹配css
const cssModuleRegex = /\.module\.css$|\.use(able)?\.css$/; 
const useableCssModuleRegex = /\.module\.css$/;   // 添加適合use.css或者useable.css結尾的文件的 排除文件名



 {
    test: cssRegex,
    exclude: cssModuleRegex,
    use: getStyleLoaders({
      importLoaders: 1,
    }),
  },
 {
    test: useable,
    exclude: useableCssModuleRegex,
    use: getStyleLoaders({
      importLoaders: 1,
      modules: true  // 添加到這里
    }),
  },

改完配置需要重新編譯

 npm strat

css 注意在配置中配置了正則，值匹配名帶use.css或者useable.css為結尾的文件

//  style.use.css
.box {
    background: red;
}

組件中使用

import React, {Component} from 'react';
import style from './style.use.css'

export default class Test extends Component {
    render() {
        return(
            <div className = {style.box}>
                <div>
                    {'測試'}
                </div>
            </div>
        )
    }
}

最終class被修改只在此組件中使用，在組件中就可以用這種方式來設置局部的css了

第二種方式

通過這種方式，不是真正的設置了局部變量，而是讓style只在這個組件渲染的時候,將style添加到頁面中，組件銷毀之后卸載組件用的style
這種方式看起來貌似沒有第一種好，但是這種方式使用起來不需要用className = {style.className}，不需要任何改動，直接用 className = 'className'就可以

首先也是暴露出webpack配置 如果暴露過了 省略此步驟

npm run eject

// config > webpack.config.dev.js

修改配置
// style files regexes
const cssRegex = /\.css$/;
const useable = /\.use(able)?\.css$/;  // 添加 匹配use.css或者useable.css結尾的文件
const cssModuleRegex = /\.module\.css$|\.use(able)?\.css$/; // 這里也需要修改 需要讓普通名稱的css文件的loader覆蓋
const useableCssModuleRegex = /\.module\.css$/;   // 添加適合use.css或者useable.css結尾的文件的 排除文件名


// 添加一個getUseableLoaders
const getUseableLoaders = (cssOptions, preProcessor) => {
  const loaders = [
    require.resolve('style-loader/useable'),
    {
      loader: require.resolve('css-loader'),
      options: cssOptions,
    },
    {
      // Options for PostCSS as we reference these options twice
      // Adds vendor prefixing based on your specified browser support in
      // package.json
      loader: require.resolve('postcss-loader'),
      options: {
        // Necessary for external CSS imports to work
        // https://github.com/facebook/create-react-app/issues/2677
        ident: 'postcss',
        plugins: () => [
          require('postcss-flexbugs-fixes'),
          require('postcss-preset-env')({
            autoprefixer: {
              flexbox: 'no-2009',
            },
            stage: 3,
          }),
        ],
      },
    },
  ];
  if (preProcessor) {
    loaders.push(require.resolve(preProcessor));
  }
  return loaders;
};

   ...
   ...
   {
    test: cssRegex,
    exclude: cssModuleRegex,
    use: getStyleLoaders({
      importLoaders: 1,
    }),
  },
  { // 添加loader
    test: useable,
    exclude: useableCssModuleRegex,
    use: getUseableLoaders({
      importLoaders: 1,
    }),
  },
  ...
  ...

改完配置需要重新編譯

 npm strat

css 注意在配置中配置了正則，值匹配名帶use.css或者useable.css為結尾的文件

//  style.use.css
.box {
    background: red;
}

組件中使用

import React, {Component} from 'react';
import style from './style.use.css'

export default class Test extends Component {
    render() {
        return(
            <div className = 'box'>
                <div>
                    {'測試'}
                </div>
            </div>
        )
    }
}

這樣就之后再加載此組件中 style.use.css 才會被引用