sass和css module在vue同时使用

sass和css module在vue同时使用

参考文档

1.在package.json中确认安装了vue-template-compiler

// 目前版本的cli都自带，不需要安装
"vue-template-compiler": "^2.6.12"

2.安装sass-loader和node-sass

# sass有版本要求，如遇报错，降低sass版本
$ npm install sass-loader@8.0.2 node-sass@4.14.1

3.在vue.config.js中添加配置

module.exports = {
  // module需要在webpack.config.js中配置，需要使用configureWebpack覆盖
  configureWebpack:{
    module:{
      rules:[{
        test: /\.css|scss$/,
        use: 'sass-loader'
      }]
    }
  }
};

4.使用

// 在Abc.vue中
<template>
  <div :class="$style.root">
    <!-- h在当前组件的$style对象中 -->
    <!-- $style中没有h,无效 -->
    <h3 :class="$style.h">abc</h3>
  </div>
</template>

<script>
export default {
  created(){
    console.log(this.$style)  // {root: 'Abc_root__wHBJ'}
  }
}
</script>

<style lang="scss" module>
  .root{
    width: 50px;
    height: 50px;
    background-color: skyblue;
  }
  :global {
    // h不在$style中(global全局)
    .h {
      color: green;
    }
  }
</style>

// 在Def.vue中
<template>
  <div :class="$style.root">
    <!-- h不在当前组件的$style对象中 -->
    <!-- 使用暴露在全局的h类,生效 -->
    <h1 class="h">def</h1>
  </div>
</template>

<script>
export default {
  created(){
    console.log(this.$style)  // {root: 'Def_root_eW8RW', h: 'Def_h_2tmI9'}
  }
}
</script>

<style lang="scss" module>
.root {
  width: 300px;
  height: 300px;
  background-color: pink;
}
// h在$style中(local局部)
.h {
  color: yellow;
}
</style>

// 多个样式时
 <div :class="[$style.one, $style.two]">

// 按条件添加样式时
<div :class="[$style.tab, 1 ? $style.active_tab : null]">

5.分析

5.1 module的作用

module 特性指引 Vue Loader 作为名为 $style 的计算属性，向组件注入 CSS Modules 局部对象，然后就可以在模板中通过一个动态类绑定来使用它了

5.2 css modules的作用域

// 局部作用域(默认)
:local(类名){样式} //省略

// 全局作用域
:global(类名){样式} // 单独一个类名时
：global{多个类名的样式} // 常用

:global修饰的样式是不会被重命名的，使用全局样式时直接赋值给class就行了，不需要进行类绑定

注意：

• 只有被加上 $style 的class才会保存在当前组件(局部)的$style对象中，不加 $style 的类在局部无法生效
• 不在$style中的类如果想要生效，必须使用 :global 暴露给全局

5.3 样式继承—composes属性

css modules中一个选择器可以继承另一个选择的样式

.bg_green{
  background-color: green;
}

.text_One{
  composes: bg_green;
  color: aqua;
}

也可以继承导入的样式

// base.scss中
.bgColor {
    background-color: rgb(236, 215, 22);
}

// abc.scss中
.text_Two{
  composes: bgColor from './base.scss';
  color: blue;
}

5.4 scss-loader没有自定义类名的选项，localIdentName是css-loader的配置