由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 纔會被引用