在Vue组件中导入SCSS变量

Question

我最近从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;
}

编辑:为了清楚起见，此日志输出一个空对象，而不是未定义的对象。

Answer 1

为了让这个东西工作，你需要遵循特定的步骤

• 创建变量文件。由于您将scss文件放入了样式中，因此需要将/assets/sass/

放入其中

• 将变量文件添加到App.scss。为此，您需要通过@import 'folder/file';

在app.scss中导入新创建的文件

• 将别名添加到webpack.mix.js。我们实际上需要做的是定义一个别名或变量，它包含到我们的sass目录的路径，这样我们就可以在我们的Vue组件中包含这个SASS。只需在您的webpack中添加别名即可

解析：{别名：{ '@'：path.resolve(‘资源/资产/sass’)} }

• 最后一件事是添加导航价值组件。您可以通过在vue组件

中添加@import '~@/folder/fie.scss'；来导入scss变量