在 Vue 组件中导入 SCSS 变量答案

【问题标题】：Importing SCSS variables in Vue components在 Vue 组件中导入 SCSS 变量
【发布时间】：2021-09-08 16:37:24
【问题描述】：

我最近从 Vue-CLI 切换到 laravel-mix，SCSS 变量的使用与 Vue-CLI 完美配合，现在在我切换到 laravel-mix 后似乎完全不工作了。

Vue-CLI 只是为我处理了所有事情，我觉得我必须配置一些东西才能让变量在 laravel-mix 中工作。

这是我尝试过的（以及与 Vue-CLI 一起使用的）：

// vue component
import variables from "@/styles/variables.scss";
// ...
data() {
    return {
        variables
    }
}
methods: {
    test() {
        console.log(this.variables)
    }
}

// scss
$variable: #FFFFFF;

:export {
    variable: $variable;
}

编辑：为了澄清，这个日志输出一个空对象，不是未定义的。

【问题讨论】：

标签： vue.js sass vuejs2 laravel-mix

【解决方案1】：

要使这件事起作用，您需要遵循特定的步骤

制作你的变量文件。当您在自己的样式中创建 scss 文件时，您需要在 /assets/sass/ 中创建它并不好
将变量文件添加到 App.scss。为此，您需要通过 @import 'folder/file' 在 app.scss 中导入新创建的文件；
为 webpack.mix.js 添加别名。我们基本上需要做的是定义一个别名或变量，其中包含我们 sass 目录的路径，以便我们可以将该 SASS 包含在我们的 Vue 组件中。只需在你的 webpack 中添加这样的别名
```
resolve: {
 alias: {
     '@': path.resolve('resources/assets/sass')
 }   
}
```
最后添加 Navigation Vue 组件。您可以通过添加 @import '~@/folder/fie.scss' 来导入 scss 变量；在 vue 组件中

【讨论】：

1.为什么我需要将 variables.scss 文件放入 /assets/sass/？我正在使用一个模板，我不想在他们的项目结构中搞乱...... 2. variables.scss 文件被导入到主 scss 文件中（在我的例子中是 index.scss） 3. 我有一个这样的别名，但我正在尝试在 Javascript 中使用 scss 变量，而不是在 CSS 中...
所以在这种情况下，您必须在主 app.scss 文件中导入 style/file.scss，然后在 webpackmix 中创建别名并在模板中使用它
这不是为了搞乱项目，实际上这些是你应该遵循的约定，否则就会一团糟
如果您查看我的帖子，您会发现我有一个别名。我确实在我的 index.scss（主 scss 文件）中导入了 variables.scss 文件。而且我确实在我的 vue 组件中使用了别名，就像你在我的“vue 组件”示例中看到的那样。
好吧，但我不能/不想弄乱这个模板的目录结构，因为这只会导致更多的问题和我无法承担的重构。它与 Vue-CLI 完全兼容。