@vue/cli-service 升级到 5。使用 import 导入 scss 文件接收值为空对象 【scss，:export {} 】

[zw-store]

Version

Reproduction link

stackblitz.com

Environment info

v14.21.3

Steps to reproduce

1 启动项目 （stackblitz 运行 或者克隆项目至本地运行）
2 app 文件中读取 variables 为空对象

What is expected?

我希望能够和过去一样在JavaScript 中 去使用它的scss 变量，，这样能最小化去改变它。

What is actually happening?

JavaScript 中读取导入的 scss 文件，接收的变量是一个空对象。

---

JavaScript 中读取导入的 scss 文件 variables 为空对象，vue-cli/service@4版本是支持的，升级到了5 底层是用的webpack5 不知道是vue-service 还是webpack 的问题

github地址：https://github.com/zw-store/stackblitz-issues

[zch233]

css: {
modules: {
mode: 'icss',
},
},

[zw-store]

css: { modules: { mode: 'icss', }, },

回头试试看，希望能用

[zw-store]

css: { modules: { mode: 'icss', }, },

ERROR Invalid options in vue.config.js: "css.modules" is not allowed
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! ruoyi@2.2.0 dev: vue-cli-service serve
npm ERR! Exit status 1

启动会报错

[yogwang]

在 css.loaderOptions 中配置 loaderOptions，或者修改原本的 xx.scss 文件名为 xxx.module.scss 即可。
可以看VueCLI的文档 👉 #CSS Modules - Working with CSS | Vue CLI

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      css: {
        modules: {
          auto: () => true
        }
      }
    }
  }
}

中文文档没有跟新，还是 4.x 版本的。

[lovecycy]

在 css.loaderOptions 中配置 loaderOptions，或者修改原本的 xx.scss 文件名为 xxx.module.scss 即可。 可以看VueCLI的文档 👉 #CSS Modules - Working with CSS | Vue CLI

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      css: {
        modules: {
          auto: () => true
        }
      }
    }
  }
}

中文文档没有跟新，还是 4.x 版本的。

这个选项配置后，scss文件似乎都是按es模块导出的，需要把所有的:export改为export default吗

[zch233]

css: { modules: { mode: 'icss', }, },

ERROR Invalid options in vue.config.js: "css.modules" is not allowed npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! ruoyi@2.2.0 dev: vue-cli-service serve npm ERR! Exit status 1

启动会报错

mybe need loaderOptions wrapper

css: {
loaderOptions: {
css: {
modules: {
mode: 'icss',
},
},
},
},

[yogwang]

这个选项配置后，scss文件似乎都是按es模块导出的，需要把所有的:export改为export default吗

@lovecycy 最简单的方式就是把你的文件名从原本的 xx.scss 修改为 xxx.module.scss，然后再把所有的 import 调整一下。这样就不需要配置 loader 了，如果你不怎么会配置 loader 的话。

[lovecycy]

这个选项配置后，scss文件似乎都是按es模块导出的，需要把所有的:export改为export default吗

@lovecycy 最简单的方式就是把你的文件名从原本的 xx.scss 修改为 xxx.module.scss，然后再把所有的 import 调整一下。这样就不需要配置 loader 了，如果你不怎么会配置 loader 的话。

有没有一种方法是不使用css模块化，同时支持css :export{}导出,js import导入呢，因为使用模块化会使我的样式丢失。我在之前的项目中使用vue-cli 4是可以的。

[lovecycy]

这个选项配置后，scss文件似乎都是按es模块导出的，需要把所有的:export改为export default吗

@lovecycy 最简单的方式就是把你的文件名从原本的 xx.scss 修改为 xxx.module.scss，然后再把所有的 import 调整一下。这样就不需要配置 loader 了，如果你不怎么会配置 loader 的话。

就像这篇文章一样 如何在 Javascript 和 Sass 之间共享变量。对了大佬，我现在是vue-cli 5的环境。

[lovecycy]

没事了大佬，我老实用模块化吧

这个选项配置后，scss文件似乎都是按es模块导出的，需要把所有的:export改为export default吗

@lovecycy 最简单的方式就是把你的文件名从原本的 xx.scss 修改为 xxx.module.scss，然后再把所有的 import 调整一下。这样就不需要配置 loader 了，如果你不怎么会配置 loader 的话。

就像这篇文章一样 如何在 Javascript 和 Sass 之间共享变量。对了大佬，我现在是vue-cli 5的环境。

没事了大佬，我老实用模块化吧

[yogwang]

就像这篇文章一样 如何在 Javascript 和 Sass 之间共享变量。对了大佬，我现在是vue-cli 5的环境。

是的，我升级到 CLI 5x 之后也遇到了这个问题。就是把原本的 variables.scss 修改为 variables.module.scss 就好了。然后你在js中使用 import 导入 scss 文件时直接 import variables from '@/styles/variables.module.scss' 就行了。

看你这个链接多半就是用的 vue-element-admin

[Alexia3111]

@yogwang 我把variables.scss 修改为 variables.module.scss ，在本地开发没有问题，但是打包到线上，这部分样式好像丢失了，样式加载不正常了。

[yogwang]

@Alexia3111 和 loader 也有关系的，我有一篇相关的笔记，希望对你有帮助 在 JS 中引入并使用 SASS 变量。最近在内网开发可能没有办法及时反馈。