css的模块化

1. 关于less使用建议

1、过渡的嵌套会导致很多问题发生，使代码变得更复杂，而且太过依赖于HTML结构，这样后面要覆盖样式需要依赖于"!important"，而这种方式又是我们尽量避免使用的一种

2、嵌套层级不应该超过三层

3、嵌套层级编译出来的CSS，要确保其简洁，可重用

4、使用嵌套很有意义，但并不意味着无限级的嵌套

2.这玩意的好处

解决CSS中的全局作用域问题。说白了就是解决不同页面样式冲突的问题
保留了很好的组件复用性 （composes）
很方便的按需加载

3.启用css modules 只需在webpack中使用css-loader，下面为less中使用

`使用cssmodules后改变css,浏览器会自动刷新,因为他是基于对象的，之前直接写less的时候，需要手动的`

//@Lynn 这里我开启自己编写的less文件的css modules功能 除了node_modules库中的less
//也就是可以过滤掉antd库中的样式
{
  test: /\.less$/,
  exclude: [/node_modules/],
  use: [
      require.resolve('style-loader'),
      {
          loader: require.resolve('css-loader'),
          options: {
              modules: true,
              localIndexName:"[name]__[local]___[hash:base64:5]"
          },
      },
      {
          loader: require.resolve('less-loader'), // compiles Less to CSS
      },
  ],
}

4. 在智慧社区里面使用：
1. 对于局部css 采用[name]. module.[less | css]，


//这个是在config/webpack.config.dev.js里面定义了
{
test: /\.less$/,
use: [
  require.resolve('style-loader'),
  ({resource}) => ({
    loader: 'css-loader',
    options: {
      importLoaders: 1,
      modules: /\.module\.less/.test(resource),
      localIdentName: '[name]__[local]___[hash:base64:5]',
    },
  }),
  {
    loader: require.resolve('postcss-loader'),
    options: {
      ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
      plugins: () => [
        require('postcss-flexbugs-fixes'),
        autoprefixer({
          browsers: [
            '>1%',
            'last 4 versions',
            'Firefox ESR',
            'not ie < 9', // React doesn't support IE8 anyway
          ],
          flexbox: 'no-2009',
        }),
      ],
    },
  },
  {
    loader: require.resolve('less-loader'),
    options: {
      modifyVars: theme,
    },
  },
],
}
2. 定义全局样式，直接在css|less文件加入:global：
/* 定义多个全局样式 */
	:global {
	  .link {
	    color: green;
	  }
	  .box {
	    color: yellow;
	  }
	}
3. 对于组件的引入
/* components/Button.css */
.base { /* 所有通用的样式 */ }

.normal {
  composes: base;
  /* normal 其它样式 */
}

.disabled {
  composes: base;
  /* disabled 其它样式 */
}
import styles from './Button.css';

buttonElem.outerHTML = `<button class=${styles.normal}>Submit</button>`
4.css modules的局限：
1.class名必须是驼峰形式，否则不能正常在js里使用 styles.table 来引用 对此的解决方法
className={styles['tree-component-header']
2.由于css模块化是默认，当你希望使用正常的全局css时，需要通过:local 和 :global 切换，不方便
3.所有的 className 都必须使用 {style.className} 的形式


5.composes 关键词
//css
  .serif-font {
      font-family: Georgia,serif;
  }
  .display {
     composes: serif-font;
      font-size: 30px;
      line-height: 35px;
  }}
 //组件
 import styles from "./type.css";
 element.innerHTML = 
 `
     <h1 class={styles.display}>
         This is a heading
     </h1>`
     
 //浏览器
 <h1 class="_type__display_0980340 _type_serif_404840">
     This is a heading
 </h1>

最后配上我自己设置的cssModules


{
 test: lessRegex,
 exclude: lessModuleRegex,
 use: getStyleLoaders(
     {
       importLoaders: 2,
       modules: true,
         localIdentName: '[path][name]-[local]-[hash:base64:5]',
       sourceMap: isEnvProduction && shouldUseSourceMap,
     },
     'less-loader'
 ),
 sideEffects: true
}

详情看：

1. 如何在react中使用antd+less+css modules

2. 具体使用 结合classnames

3. CSS Modules 详解及 React 中实践