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

Question

问题

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

根据Vue 的文档：

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

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

样式/variables.module.css

$variable: 'foo';

:export {
  variable: $variable
}

应用程序

$variable: 'foo';

:export {
  variable: $variable
}

<style module>然而，在同一个 vue 文件的标签内导入 variables.css 文件确实有效。

应用程序

<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>

我正在努力实现的目标

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

:export {
  variable: $variable;
}
</style>

试过：

• 添加.module到 SCSS 文件名（根据vue 的文档）
• 创建一个 vue.config.js 文件requireModuleExtension: false （来自相同的文档）

可重现的演示

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

Answer 1

您需要将webpackCSS模块化代码添加到webpack.config.js.

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

这是工作演示

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