CSS Modules

什么是CSS Modules?

官方的介绍是:

所有的 class 的名称和动画的名称默认属于本地作用域的 CSS 文件。

所以 CSS Modules 不是一个官方的规范,也不是浏览器的一种机制,它是一种构建步骤中的一个进程。(构建通常需要 webpack 或者 browserify 的帮助)。通过构建工具的帮助,可以将 class 的名字或者选择器的名字作用域化。(类似命名空间化)。

为什么我们要用CSS Modules?

有了 CSS Modules,就可以确保所有的样式能够服务于单个组件:

  • 集中在一个地方
  • 只应用于那个组件,其他组件不适用

这样设计的目的在于解决 CSS 中的全局作用域问题。

CSS Modules 使用方式

styles.scss

.wrap {
  width: 500px;
  height: 300px;
  padding: 30px 10px;

  .red {
    color: red;
  }
}

foo.js

import styles from "./styles.scss";
import mainStyles from "./main.scss";

class Foo extends React.Component {
    render() {
        return (
            
我是受 CSS Modules 控制的文字。
) } }

Composes 关键词

.serif-font {
    font-family: Georgia,serif;
}
.display {
    composes: serif-font;
    font-size: 30px;
    line-height: 35px;
}

// composes 还能混合外部样式文件的class
.container {
  text-align: left;
  font-size: 20px;
  composes: box from "../styles/layout.scss";
}

使用 composes 关键词会将2个class都绑定到元素上,类似 Sass 中的 @extend。

Webpack 对 CSS Modules 的配置

css modules 最简单的情形,只需要在 css-loader 启动 css module 配置即可。

一般项目中,会有 global.css 这样的全局 css 样式,这些样式不需要用作 css module,此时可以配置两种 css 管理方式(对  global.css 不作 css module 处理,其余的进行 css module 处理)。

webpack.config.dev.js

module: {
     rules: [{
         test: /\.(css|scss)$/,
         exclude: path.resolve(__dirname, 'src/styles/global'),
         use: [
           'style-loader',
           {
             loader: 'css-loader',
             options: {
                 modules: true,
                 localIdentName: '[name]__[local]-[hash:base64:5]'
             }
           },
           'sass-loader'
         ]
      }, {
        test: /\.(css|scss)$/,
        include: path.resolve(__dirname, 'src/styles/global'),
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      }]
   },

 

 

 

 

 

你可能感兴趣的:(HTML,CSS)