杂记

create-react-app创建一个ts+less的react项目

1. create-react-app 创建一个react + ts项目：create-react-app <projectName> --template typescript

2. 配置less

   1. 安装相关依赖：npm install less less-loader --save

   2. 配置项目的webpack配置

      1. npm run eject（弹出create-react-app创建的项目的配置细节，比如webpack.config.js，但过程不可逆）

         1. 执行之前删除项目里的.git文件夹，否则会报错

      2. 进入webpack.config.js，模仿scss的相关配置配置less即可：

         // scss相关
         const sassRegex = /.(scss|sass)$/;
         const sassModuleRegex = /.module.(scss|sass)$/;
         // 仿写less相关
         const lessRegex =/.less$/;
         const lessModuleRegex =/.module.less$/;
         

         loader部分：

         // Opt-in support for SASS (using .scss or .sass extensions).
         // By default we support SASS Modules with the
         // extensions .module.scss or .module.sass
         {
           test: sassRegex,
           exclude: sassModuleRegex,
           use: getStyleLoaders(
             {
               importLoaders: 3,
               sourceMap: isEnvProduction
                 ? shouldUseSourceMap
                 : isEnvDevelopment,
               modules: {
                 mode: 'icss',
               },
             },
             'sass-loader'
           ),
           // Don't consider CSS imports dead code even if the
           // containing package claims to have no side effects.
           // Remove this when webpack adds a warning or an error for this.
           // See https://github.com/webpack/webpack/issues/6571
           sideEffects: true,
         },
         // Adds support for CSS Modules, but using SASS
         // using the extension .module.scss or .module.sass
         {
           test: sassModuleRegex,
           use: getStyleLoaders(
             {
               importLoaders: 3,
               sourceMap: isEnvProduction
                 ? shouldUseSourceMap
                 : isEnvDevelopment,
               modules: {
                 mode: 'local',
                 getLocalIdent: getCSSModuleLocalIdent,
               },
             },
             'sass-loader'
           ),
         },
         ​
         //  less仿写：
         {
           test: lessRegex,
           exclude: lessModuleRegex,
           use: getStyleLoaders(
             {
               importLoaders: 3,
               sourceMap: isEnvProduction
                 ? shouldUseSourceMap
                 : isEnvDevelopment,
             },
             'less-loader'
           ),
           sideEffects: true,
         },
         {
           test: lessModuleRegex,
           use: getStyleLoaders(
             {
               importLoaders: 3,
               sourceMap: isEnvProduction
                 ? shouldUseSourceMap
                 : isEnvDevelopment,
               modules: {
                 getLocalIdent: getCSSModuleLocalIdent,
               },
             },
             'less-loader'
           ),
         },
         

react项目样式隔离方案

每个组件设置一个唯一的类名前缀

// title即为该组件的唯一前缀
function Title() {
  return (
    <div className='title'>
      <div className='title-name'></div>
      <div className='title-time'></div>
      <div className='title-content'>
        <div className='title-content-item'></div>
        <div className='title-content-item'></div>
        <div className='title-content-item'></div>
      </div>
    </div>
  )
}
/**
 * 相应的样式可以使用 & 符代替前缀(scss)
 */
.title{
  &-name{
  }
  &-time{
  }
  &-content{
    &-item{
    }
  }
}

CSS Module

1. 书写css模块文件，如style.module.css

2. 组件中引入并使用：

   import style from './style.module.scss'
   ​
   function Page1() {
     return (
       <div>
         <div className={style.title}>i m vagetable dog</div>
       </div>
     );
   }
   ​
   export default Page1;