无法访问 Vue 文件脚本标签中的 CSS 变量

Posted 2023-03-15

【中文标题】无法访问 Vue 文件脚本标签中的 CSS 变量

【英文标题】：Can't access CSS variables in script tag of Vue file

【发布时间】：2020-12-02 07:40:39

【问题描述】：

问题

我正在尝试从.vue 文件访问在 SCSS 文件中定义的变量。该项目正在使用 vue-cli。

根据Vue's docs：

“Vue CLI 项目支持 PostCSS、CSS 模块和预处理器，包括 Sass、Less 和 Stylus。”

但是，如果我使用名为 variable 的变量创建一个 variables.css 文件，并尝试在脚本中导入它，则找不到此 variable。

styles/variables.module.css

$variable: 'foo';

:export 
  variable: $variable

App.vue

<script>
import variables from "./styles/variables.module.scss";
export default 
  name: "App",
  methods: ,
  computed: 
    variable() 
      console.log(variables);  // Object 
      return variables.variable || "not found";
    
  
;
</script>

但是，在同一 vue 文件的 <style module> 标签中导入 variables.css 文件确实有效。

App.vue

<style module lang="scss">
@import "./styles/variables.module.scss";

:export 
  variable: $variable;

</style>

我正在努力实现的目标

<p>Importing within &lt;script&gt;, the variable is variable</p>
// 'not found', should be "foo"
<p>Importing within &lt;style&gt;, the variable is $style.variable</p>
// correctly showing "foo"

试过了：

在 SCSS 文件名中添加.module（根据vue's docs） 使用requireModuleExtension: false 创建一个 vue.config.js 文件 （来自相同的文档）

可重现的演示

https://codesandbox.io/s/importing-css-to-js-o9p2b?file=/src/App.vue

【问题讨论】：

您将 CSS 变量 (property: var(--some-name)) 与 SCSS 变量混为一谈。它们是用于不同目的的不同类型的变量（CSS 变量是实时工作的，可以被 CSSOM 解析器（浏览器）解析，而 SCSS 变量被预处理器用来从 SCSS 创建 CSS）并且可以被 SCSS/解析SASS 解析器。从好的方面来说，正如@tuhin 的回答所指出的那样，SCSS 变量可以导入到.(ts|js) 文件中，而 CSS 变量则不多（尽管我可能没有及时了解这方面的最新消息）。

【参考方案1】：

您需要在webpack.config.js中添加webpack和CSS modular代码。

npm install -D vue-loader vue-template-compiler webpack

这是工作的demo

注意：你的vue-template-compiler和vue应该是同一个版本

【讨论】：

太棒了，谢谢！我注意到您的沙箱位于容器环境中。这是让它工作的必要条件还是只是您的个人喜好？