webpack基础——css样式模块化

当直接 webpack 打包的时候，所打包的 css 都是全局通用的，但这可能不是我们想要的。故需要 css 模块化

avator.scss

body {
    .avator {
        width: 300px;
        height: 300px;
        transform: translateX(100px);
    }
}

1. 再 webpack 里配置，设置 css-loader 的 modules：true
   
2. 原来是直接这样引入的css / sass（同理）

import avator from '../asset/img/6.jpg'

import '../scss/avator.scss'

const app = document.getElementById('app')

function createOtherAvator() {
  const img = new Image()
  img.src = avator
  img.className += 'avator'
  app.appendChild(img)
}

现在改成：

import avator from '../asset/img/6.jpg'

import styles from '../scss/avator.scss'     //改动过一，赋个名字

const app = document.getElementById('app')

console.log('styles: ', styles)    //【1】

function createOtherAvator() {
  const img = new Image()
  img.src = avator
  img.className += `${styles.avator}`  //改动二
  app.appendChild(img)
}

然后打包即可。

看看【1】处打印结果

也就是说 img 的 class 被赋值成了 fN7MQ3cytMCtcA6Rva1O

再看 style ，原来的 .avator 被打包重命名，成了这样