投稿

Webpack入门，CSS Modules

ZERO • • 教程 • 672 views

CSS Modules是近年来比较流行的一种开发模式，其理念就是把CSS模块化，让CSS也拥有模块的特点，具体如下：

  • 每个CSS文件中的样式都拥有单独的作用域，不会和外界发生命名冲突。
  • 对CSS进行依赖管理，可以通过相对路径引入CSS文件。
  • 可以通过composes轻松复用其他CSS模块

使用CSS Modules时不需要额外安装模块，只要开启css-loader中的modules配置项即可。

// webpack.config.js
module.exports = {
  ...
  module: {
    rules: [{
      test: /\.css/,
      use: [
        'style-loader', 
        {
          loader: 'css-loader',
          options: {
            modules: true,
            // localIndentName 用于指明CSS代码中的类名会如何编译。
            // [name]指代的是模块名。
            // [local]指代的是原本的选择器标识符。
            // [hash:base64:5]指代的是一个5位的hash值，这个hash值是根据模块名和标识符计算的。
            localIdentName: '[name]_[local]_[hash:base64:5]',
          }   
        }
      ]
    }]
  }
}
/* style.css */
.title {
  color: #f938ab;
}

/*
经编译后可能会变为
.style_title_1cFy6
*/

在使用过程中开发者还要注意在JavaScript中引入CSS的方式。之前直接将CSS文件引入就可以了，但使用CSS Modules时CSS文件会导出一个对象，所以开发者需要把这个对象的属性添加到HTML标签上。

// index.js
import styles from './style.css';
document.write(`<h1 class="${styles.title}">My Webpack app!</h1>`);

原创文章，作者：ZERO，如若转载，请注明出处：https://www.edu24.cn/course/webpack-css-modules.html

Like (0)
Donate 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
ZEROZERO
0 0
Previous 2022年11月25日
Next 2023年11月23日

相关推荐