起因是我前段时间开始学习react,看了其他人的代码,发现他的各个组件的css全部都写在一个css文件下面。

其实如果样式非要跟组件在一起,也不是不行,就是把样式写在组件的js里,这就是react-native的写法。

但是呢,我觉得这样怪怪的,如果样式很多呢,那岂不是特别混杂?
说白了我就是不想这么写!!!


写过vue-cli构建的vue项目的同学,应该有印象:每个组件的样式是直接与vue文件在一起的,我觉得十分利于管理,那么react是不是也有呢?

当然了!

我看到webpack3的文档这种是有这么一说的:

webpack.config.js

	{
  test: /\.css$/,
  use: [
    {
      loader: 'css-loader',
      options: {
        modules: true,//开启css 模块化
        localIdentName: '[path][name]__[local]--[hash:base64:5]'//配置生成的标识符(ident)
      }
    }
  ]
}

这样就好了。
比如:
这里写图片描述
在index.js文件中引入bar.less

import styles from './bar.less'

不要这样引入!!!

import './bar.less'

效果:
这里写图片描述

其实这个就相当于vue style标签里的scope属性。

Logo

前往低代码交流专区

更多推荐