???create-react-app???react??????????????????css

Posted 2021-01-28

?????????round   xbox   ref   row   ??????   external   ??????   ??????   resolve   

?????????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$/;


 {
    test: cssRegex,
    exclude: cssModuleRegex,
    use: getStyleLoaders({
      importLoaders: 1,
      modules: true  // ???????????????
    }),
  },

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

?????????????????????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$/;


// ????????????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: cssModuleRegex,
    use: getUseableLoaders({
      importLoaders: 1,
    }),
  },
  ...
  ...

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 ???????????????