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

Question

问题

我正在尝试从.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

Answer 1

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

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

这是工作的demo

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