CSS Modules 解决 react 项目 css 样式互相影响的问题

Amy948 等级 749 0 0

CSS Modules 解决 react 项目 css 样式互相影响的问题

CSS Modules 解决 react 项目 css 样式互相影响的问题

CSS Modules 解决 react 项目 css 样式互相影响的问题

1. CSS Modules引入目的

  写过CSS的人,应该都对一大长串选择器选中一个元素不陌生吧,这种方式,其实定义的就是全局样式,我们时常会因为选择器权重问题,没有把我们想要的样式加上去。

  另外,每次都需要把所有的样式表都导入到程序中,如果我们可以像使用js模块一样,想用哪块就用哪块,是不是就很理想了。

  CSS Modules就解决了这个问题,它自动为每一个类生成一个哈希值,可以惟一标志这个类,因此避免了我们说的第一个问题,它让我们可以像使用js模块那样,想用哪部分样式,就引入哪部分样式。下面我们来具体介绍它的使用方法。

2.CSS Modules使用方法

1) 如何在开启CSS Modules

  create-react-app 脚手架 引入 css-modules

modules:true,
localIdentName:'\[name\]\_\_\[local\]\_\_\[hash:base64:5\]'

  webpack.config.dev.js

{
  test: /.less$/,
  exclude: /node\_modules|antd.css/,
  use: \[
    require.resolve('style-loader'),
    {
      loader: require.resolve('css-loader'),
      options: {
        importLoaders: 1,
        modules:true,
        localIdentName:'\[name\]\_\_\[local\]\_\_\[hash:base64:5\]'
      },
    },
    {
      loader: require.resolve('postcss-loader'),
      options: {
        // Necessary for external CSS imports to work
        // https://github.com/facebookincubator/create-react-app/issues/2677
        ident: 'postcss',
        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') // compiles Less to CSS
    }
  \],
},
{
  test: /.css$/,
  use: \[
    require.resolve('style-loader'),
    {
      loader: require.resolve('css-loader'),
      options: {
        importLoaders: 1,
      },
    },
    {
      loader: require.resolve('postcss-loader'),
      options: {
        // Necessary for external CSS imports to work
        // https://github.com/facebookincubator/create-react-app/issues/2677
        ident: 'postcss',
        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',
          }),
        \],
      },
    },
  \],
},

CSS Modules 解决 react 项目 css 样式互相影响的问题

  webpack.config.prod.js

{
  test: /.less$/,
  exclude: /node\_modules|antd.css/,
  loader: ExtractTextPlugin.extract(
    Object.assign(
      {
        fallback: {
          loader: require.resolve('style-loader'),
          options: {
            hmr: false,
          },
        },
        use: \[
          {
            loader: require.resolve('css-loader'),
            options: {
              importLoaders: 1,
              modules:true,
              localIdentName:'\[name\]\_\_\[local\]\_\_\[hash:base64:5\]',
              minimize: true,
              sourceMap: shouldUseSourceMap,
            },
          },
          {
            loader: require.resolve('postcss-loader'),
            options: {
              // Necessary for external CSS imports to work
              // https://github.com/facebookincubator/create-react-app/issues/2677
              ident: 'postcss',
              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') // compiles Less to CSS
          }
        \],
      },
      extractTextPluginOptions
    )
  ),
  // Note: this won't work without \`new ExtractTextPlugin()\` in \`plugins\`.
},
{
  test: /.css$/,
  loader: ExtractTextPlugin.extract(
    Object.assign(
      {
        fallback: {
          loader: require.resolve('style-loader'),
          options: {
            hmr: false,
          },
        },
        use: \[
          {
            loader: require.resolve('css-loader'),
            options: {
              importLoaders: 1,
              minimize: true,
              sourceMap: shouldUseSourceMap,
            },
          },
          {
            loader: require.resolve('postcss-loader'),
            options: {
              // Necessary for external CSS imports to work
              // https://github.com/facebookincubator/create-react-app/issues/2677
              ident: 'postcss',
              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',
                }),
              \],
            },
          },
        \],
      },
      extractTextPluginOptions
    )
  ),
  // Note: this won't work without \`new ExtractTextPlugin()\` in \`plugins\`.
},

CSS Modules 解决 react 项目 css 样式互相影响的问题

2)CSS Modules用法

 1.基本使用方法

  在你的项目中,添加一个CSS文件,然后你就可以像引入js模块一样,在你的js文件中引入这个文件存放到一个对象中。这个对象中是一个包含连个属性的对象,其值就是自动生成的类名。这个类名也会替换页面中的类名。

style.scss

/\* style.scss \*/
.bgRed {
    background-color: #f00;
}

app/app.js

/\* app/app.js \*/

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
/\* 引入我们定义的.scss文件 \*/
import styles from '../style/style.scss';

/\* 使用无状态函数定义我们的组件\*/
function Title() {
    console.log(styles);
    /\* 打印引入的styles,是一个包含连个属性的对象,其值就是自动生成的类名
        Object {white: "\_24PAw-tvdzL8pt4nyAvnJX", bgRed: "\_2R9YNZv7rx\_o02FHxKTBzC"}
     \*/
    return (
        /\* 在组件中引用 \*/
        <h1 className={styles.bgRed}>Hello React!</h1>
    );
}

/\* 渲染到页面中 \*/
ReactDOM.render(<Title />, document.body );

 最终页面结构,如下图所示:

CSS Modules 解决 react 项目 css 样式互相影响的问题

  2. 自定义命名规则

  上面生称的类名,完全是自动生成,如果自己自己规定命名规则呢,也是很简单的,只需要在上面配置modules后面添加&localIdentName=配置规则,如:

'css-loader?modules&localIdentName=[name]__[local]-[hash:base64:5]' //style__bgRed-2R9YN,local对应所在文件夹名,local对应文件名,最后是哈希值

CSS Modules 解决 react 项目 css 样式互相影响的问题

  3. 全局类名和本地类名

  我们可以使用:global(className)来标识这个类是全局类名,因此CSS Modules不对其类名进行转化,:local(className)则相反,如果不用这两个包裹的话,默认是local.

style.scss

/\* style.scss \*/
.bgRed {
    background-color: #f00;
}

// 添加全局bgRed
:global(.bgRed) {

}

app/app.js

/\* app/app.js \*/

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
/\* 引入我们定义的.scss文件 \*/
import styles from '../style/style.scss';

/\* 使用无状态函数定义我们的组件\*/
function Title() {
    console.log(styles);
    return (
        /\* 在组件中全局的bgRed,此时我们可以访问到我们全局定义的bgRed,它并没有被转化 \*/
        <h1 className="bgRed"}>Hello React!</h1>
    );
}

/\* 渲染到页面中 \*/
ReactDOM.render(<Title />, document.body );

  4. 使用composes组合样式

  我们知道,node.js中,我们可以用require引入模块,然后使用它们。CSS Modules也提供了composes来该文件中的样式规则,甚至引用其它文件中的样式规则。

style/style.scss

/\* style/style.scss \*/

.fontWhite {
    color: #fff;
}
.bgRed {
    composes: fontWhite;
    background-color: #f00;
}

app/app.js

/\* app/app.js \*/

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
/\* 引入我们定义的.scss文件 \*/
import styles from '../style/style.scss';

/\* 使用无状态函数定义我们的组件\*/
function Title() {
    console.log(styles);
    /\* 打印引入的styles,是一个包含连个属性的对象,其值就是自动生成的类名
        Object {fontWhite: "style\_\_fontWhite-3jipu", bgRed: "style\_\_bgRed-2R9YN style\_\_fontWhite-3jipu"}rx\_o02FHxKTBzC"}
     \*/
    return (
        /\* 在组件中引用 \*/
        <h1 className={styles.bgRed}>Hello React!</h1>
    );
}

/\* 渲染到页面中 \*/
ReactDOM.render(<Title />, document.body )

此时,就是添加了两个类,html结构如下图:

CSS Modules 解决 react 项目 css 样式互相影响的问题

引入其它文件中的样式规则,写composes: className(要引入的类名) from '引入的文件路径即可',最终效果同上,composes多少规则,就添加多少类。

最后:大家有名有发现,我一直都在类上做文章,那是因为CSS Modules只转换class名相关的样式。大家要注意啦。

在最后,给大家提供一个js库——classnames类库,给我的感觉和angular中的ng-class差不多,将值为true的类添加上。

收藏
评论区

相关推荐

CSS Modules 解决 react 项目 css 样式互相影响的问题
CSS Modules 解决 react 项目 css 样式互相影响的问题 CSS Modules 解决 react 项目 css 样式互相影响的问题 (http
有关CSS预编译、管理工具和网络安全的相关面试题
我经常会听到一些想入行前端的人问,前端开发需要学习哪些技术?其实,除了核心的HTML、CSS、JavaScript技术外,像CSS预编译、前端框架,如Vue,React、Node、Angular;代码管理工具,如git,代码编辑器,sublime text,还有测试,网络安全等相关技术也是需要会一些。当然要求可能不会那么高,但至少要懂一些。所有今天准备了一些
只听说过CSS in JS,怎么还有JS in CSS?
CSS in JS是一种解决css问题想法的集合,而不是一个指定的库。从CSS in JS的字面意思可以看出,它是将css样式写在JavaScript文件中,而不需要独立出.css、.less之类的文件。将css放在js中使我们更方便的使用js的变量、模块化、treeshaking。还解决了css中的一些问题,譬如:更方便解决基于状态的样式,更容易追溯依赖关
CSS
css垂直渐变   #example3        {         /\* fallback \*/         background-color:#063053;         /\* chrome 2+, safari 4+; multiple color stops \*/         background-image:-we
CSS
在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了,下面总结8种清除浮动的方法,测试已通过 ie chrome firefox opera,需要的朋友可以参考下 清除浮动是每一个 web前台设计师必须掌握的机能。css清除浮动大全,共8种方法。  浮动会使当前标签产生向上浮的效果,同时会影响到前后标签、父级标签的位置及 width hei
CSS基本用法介绍
CSS介绍 ===== css定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS语法 ===== ### css实列 每个CSS样式由两个组成部分:选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。 ### css注释 /*这是注释*/ CSS的几种引入方
CSS基础知识整理
### **1 什么是CSS?** CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。 CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式。 ###
43个实例xHTML+CSS(DIV+CSS)网页及导航布局教程
在中国,很多前端开发初学者都会把xHTML+CSS页面制作说成DIV+CSS,甚至很多人都还不知道xHTML+CSS是什么意思,只知道盲目的追求DIV+CSS,但在国外,是没有DIV+CSS这个概念的,很明显如果单从字面上去理解,DIV+CSS的网页就要全都是div,很明显是无法达到语义化标准的。请把”DIV+CSS”这个词从脑子中删除,用”xHTML+CS
CSS Font
CSS Font-Size: em vs. px vs. pt vs. percent =========================================== One of the most confusing aspects of CSS styling is the application of the **font-size** at
JavaScript template engine in just 20 lines
I'm still working on my JavaScript based preprocessor - [AbsurdJS](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fkrasimirtsonev.com%2Fblog%2Farticle%2FAbsurdJS-fundament
Less功能特性
(1)变量     我们常常在 CSS 中 看到同一个值重复多次,这样难易于代码维护 const bgColor="skyblue"; $(".post-content").css("background-color",bgColor); $("#wrap").css("background-color",bgColor);
MiniUi遇到的一个Bug或者说坑,以div里面的内容自适应高度
页面源码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link href="css/demo.css" rel="stylesheet" type="tex
React技术栈实现XX点评电商App
> 项目地址:[https://github.com/Nealyang/React-Fullstack-Dianping-Demo](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fgithub.com%2FNealyang%2FReact-Fullstack-Dianping-Demo)
Selenium2学习(六)
前言 大部分人在使用selenium定位元素时,用的是xpath定位,因为xpath基本能解决定位的需求。css定位往往被忽略掉了,其实css定位也有它的价值,css定位更快,语法更简洁。 这一篇css的定位方法,主要是对比上一篇的xpath来的,基本上xpath能完成的,css也可以做到。两篇对比学习,更容易理解。 一、css:属性定位     

热门文章

最新文章