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

问题描述

问题

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

根据Vue's docs：

“ Vue CLI项目附带对PostCSS，CSS模块和预处理器（包括Sass，Less和Stylus）的支持。”

但是，如果我创建一个名为variables.css的变量variable并尝试将其导入脚本中，则找不到此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"

尝试过：

• 将.module添加到SCSS文件名（按照vue's docs）
• 使用requireModuleExtension: false创建vue.config.js文件 （来自同一文档）

可复制的演示

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

解决方法

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

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

这是工作中的demo

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

,

可以使用SCSS包导入.ts文件，从.sccs文件生成scss-to-json的变量。 codeandbox lambda layer。

我使用demo中所述的以下步骤。

1. 安装npm i --save-dev scss-to-json。

2. 将此内容放入您的package.json：

"scripts": {
  ...
 "scss2json": "echo \"export const SCSS_VARS = \" > src/styles/scss-variables.generated.ts && scss-to-json src/styles/variables.module.scss >> src/styles/scss-variables.generated.ts"
 },

并使用npm run scss2json运行它。 Windows用户将需要调整示例。

1. 访问变量：

import {SCSS_VARS} from './styles/scss-variables.generated.ts';
...
console.log(SCSS_VARS["$variable"]);