当前位置 > it书童 > webpack > 正文

webpack 设置 scss 作用域模块化

webpack it书童 2020-02-08 10:51:41 0赞 0踩 258阅读 0评论

scss 全局作用

新建 src/createAvatar.js

import avatar from "./avatar.jpg"

function createAvatar()
{
    let img = new Image()
    img.src = avatar
    img.classList.add('avatar')

    let root = document.getElementById('root')
    root.append(img)
}

export default createAvatar

修改 src/index.js

// 在此引入的 index.scss 会作用于 createAvatar.js 的元素,相当于这是全局的 css 这样的耦合性太高
import './index.scss'
import createAvatar from "./createAvatar"

src/index.scss

body {
    .avatar {
        width: 150px;
        height: 150px;
        transform: translate(100px, 100px);
    }
}

编译后发现,index.scss 声明的样式会作用于 createAvatar.js,这种全局样式在项目大时,会造成很多麻烦,就像挠痒一样,原本只是有一点痒,一挠,反而周身都痒起来了

仅作用于指定模块

接下来使作用域仅限于指定模块

src/index.js

import avatar from "./avatar.jpg"
import style from './index.scss'
import createAvatar from "./createAvatar"

createAvatar()

let img = new Image()
img.src = avatar
img.classList.add(style.avatar)

let root = document.getElementById('root')
root.append(img)

webpack.config.js

{
    test: /\.scss$/,
    use: [
        'style-loader',
        {
            loader: 'css-loader',
            options: {
                importLoaders: 2,
                // 开启 scss 的模块化
                modules: true
            }
        },
        'sass-loader',
        'postcss-loader'
    ]
}

编译,发现只有 index.scss 只作用于一张图片,不会影响全局

源码

转载须注明出处:https://www.itshutong.com/articles/416/webpack-set-scss-scope-modularization
关于我
一个文科出身的程序员,追求做个有趣的人,传播有价值的知识,微信公众号主要分享读书思考心得,不会有代码类文章,非程序员的同学请放心订阅
发表评论
我有句话,不知当讲不当讲?
要讲之前请先 登录