关于Scss样式中使用 :export 导出的对象在js中未空对象问题解答

Question

首先明确一个东西【CSS Modules】
是个啥东西：CSS Modules 是一个流行的，用于模块化和组合 CSS 的系统。
解决啥问题：
1.样式冲突(污染)问题(因为css的规则是全局的，任何一个组件的样式规则，都对整个页面有效)
2.组件依赖管理不彻底，组件应该相互独立，引入一个组件时，应该只引入它所需要的CSS样式
3.代码难以复用，出现了sass less之类的工具解决这个问题
有啥功能:
1.局部作用域
产生局部作用域的唯一方法，就是使用一个独一无二的class的名字，不会与其他选择器重名。这 就是CSS Modules 的做法。

(注：css-loader中已经集成css-module功能)

2.定制哈希类名
css-loader默认的哈希算法是[hash:base64]，从前面我们可以发现.c1 被编译成了 _1TyUMnubgEBLCDM5y3ayYM 这样的字符串。这名字也没风格了别担心，css-loader 为我们提供了localIdentName 参数指定生成的名字格式。localIdentName的默认值是[hash:base64]。

{
    test: /\.css$/,
    loader: 'css-loader',
    options: {
        modules: true,
        localIdentName: '[name]__[local]--[hash:base64:5]'
    }
}
// 或者是
{
      test: /\.css$/,
      loader: "style-loader!css-loader?modules&localIdentName=[path][name]---[local]---[hash:base64:5]"
},

3.全局作用域
CSS Modules 允许使用:global(.className)的语法，声明一个全局规则。凡是这样声明的class，都不会被编译成哈希字符串。

.title {  //这里.title是会被转为成[hash:base64]
  color: red;
}

:global(.title) {  //这里的.title就不会被转成[hash:base64]
  color: green;
}

4.Class组合
在 CSS Modules 中，一个选择器可以继承另一个选择器的规则，这称为"组合"（“composition”）。【和scss中的继承一样】

.className {
  background-color: blue;
}

.title {
  composes: className;
  color: red;
}

使用了.title这个样式最终会解析成这样

._2DHwuiHWMnKTOYG45T0x34 {
  color: red;
}

._10B-buq6_BEOTOl9urIjf8 {
  background-color: blue;
}

5.输入其他变量
选择器也可以继承其他CSS文件里面的规则。

//father.css
.className {
  background-color: blue;
}
//children.css
.title {
  composes: className from './another.css';
  color: red;
}

6.输入变量
CSS Modules 支持使用变量，不过需要安装 PostCSS 和 postcss-modules-values。
如果你编写的是scss、less文件，这里的postcss就可以不用引入了，因为vue-loader会自动帮我们处理,通过vue inspect命令查看vue最终生成的webpack配置文件中可以看到vue已经帮我们做了这一步处理

回归正题

//colors.css 中定义变量
@value blue: #0c77f8;
@value red: #ff0000;
@value green: #aaf200;

//App.css可以引用这些变量
@value colors: "./colors.css";
@value blue, red, green from colors;
.title {
  color: red;
  background-color: blue;
}

这里只是举例了在css中引入变量，当然css-module也支持在JS中引入css中的变量

//type.css
.title{
   color: #000;
}
//App.js
import type from './type.css'
let color = type.title.color

老师视频中使用的 :export 是scss中的导出方法，这里别搞混了两者不是一个东西，普通的css文件可没有:export方法

以上就是对cssModule简单的介绍，我们这里主要关注最后介绍的这个功能输入变量。

因为scss文件通过sass-loader编译最终也是变成了css文件，如果在scss中使用了样式导出功能，最终通过一系列loader编译，是使用cssModule来实现导出，也就是说找不到scss中：export导出的东西或者导出的东西为{}空对象，而其他一切正常的话，只能是这个cssModule出了问题

最开始我使用vue create 创建出的项目vue-cli脚手架已经是5.0.0版本了，运行项目的时候控制台抛出了scss：export导出的东西是个空对象，后面我将vue-cli脚手架版本降到了4.5.0，就正常了，肯定就是版本差异的锅呗，翻了vue的升级日志才发现

好家伙！最新的vue-cli5.0里面的vue-loader从v14之后就已经不再默认开启cssModules了，问题就在这里了新版本根本就没有默认开启cssModule，所以最终导出的东西是个空值

注：因为vue高版本已经开始使用webpack5了，webpack5关于cssModule的配置说明


给的默认值是undefined，这里vue也是保持和webpack给出的默认配置一样，不再默认开启cssModule了(估计是处于性能的考量吧…)

相关说明链接附上：
https://vue-loader.vuejs.org/zh/migrating.html#css-modules 、
https://webpack.js.org/loaders/css-loader/#modules，
只要开启cssModule配置就解决了:export 导出对象为空的问题了

最后
如果你觉得将全部css样式都通cssModule解析太过麻烦多此一举，或者之后F12审查元素发现class名变成hash值会有影响的话你也可以在样式文件命名时使用 xxx.module.css/scss 的形式只对单个文件开启cssModule(如果只针对单个文件，webpack中可以不用开启cssModule，原因如下:)

Answer 1

Sunday 2022-03-24 20:29:44

为你点赞 o(￣▽￣)ｄ

• 拉塞尔_大华 #1

  在sidebar.scss引入variables还是不行，layout/index.vue引入时可以了
  index.vue:  import variables from '@/style/variables.module.css'
  sidebar.scss:
  @value variables: '~@/style/variables.module.css';
  @value sideBarWidth,subMenuActiveText from variables;
  sideBarWidth和subMenuActiveText在CSS样式里没生效

Answer 2

拉塞尔_大华 2024-04-08 10:17:44

configureWebpack: {
 module: {
   rules: [
     {
       test: /\.css$/i,
       loader: 'css-loader',
       options: {
         modules: true
       }
     }
   ]
 }
},

在vue.config.js里配置这个后运行就报错了

Answer 3

拉塞尔_大华 2024-04-07 16:54:44

在sidebar.scss引入variables还是不行，layout/index.vue引入时可以了
index.vue:  import variables from '@/style/variables.module.css'
sidebar.scss:
@value variables: '~@/style/variables.module.css';
@value sideBarWidth,subMenuActiveText from variables;
sideBarWidth和subMenuActiveText在CSS样式里没生效

是什么原因

• 拉塞尔_大华 #1

  variables.module.scss可以了