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

Question

问题

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

根据Vue's docs：

"Vue CLI projects comes with support for PostCSS, CSS Modules and pre-processors including Sass, Less and 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"

尝试过：

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

可重现的演示

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

Answer 1

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

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

这是工作demo

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