如何在vue中重写ECSS sass变量？

我想在materialize中更改变量

在我的Vue 2

main.js中，我包括这样的物化样式

require('materialize-css/sass/materialize.scss');

因为我想我需要在包含materialize之前包含我的
\u变量.scs
，但我不知道如何

那么，设置我自己的变量的正确方法是什么，例如，
$primarycolor:color（“blue”，“light-2”）
（我想使用materialize中的预定义调色板）

编辑1:我已使用安装的vue2

编辑2:

文件夹结构：

├── build/
├── config/
├── dist/
├── node_modules/
│    ├── materialize-css
├── src/
│    ├── components
│    ├── router
│    └── main.js
├── package.json
└── index.html

在更改物化css中的任何默认设置之前；首先，需要导入要更改其设置的组件。在此之后，可以覆盖默认设置，然后导入materialize。例如，如果要更改默认颜色，请创建一个文件，例如
app.scss
，然后编写以下代码：

//please put the paths as per yours project directory structure
@import "materialize-css/sass/components/color";
$primary-color: color("blue", "lighten-2") !default;
@import 'materialize-css/sass/materialize'    

注意：页面中必须包含app.css。根据我的示例，app.css必须位于项目根文件夹中，即与index.html处于同一级别

现在，您可以在Vue 2中加载
app.scss
或
app.css
，如下所示：
require（'../app.scss'）

访问官方物化github查看完整的源代码。
但在Materialize 1.0.0中，
按照以下指导线覆盖物化颜色：

定义要覆盖的变量的值（例如$primary color）
导入materialize.scss库
在导入materialize.scss之前，必须定义覆盖值，这意味着您不能使用矩阵函数，例如color（）

示例：

// main.scss - the order of the imports is important !!!
@import './_colors';
@import 'materialize-css/sass/materialize.scss';

// _colors.scss
$primary-color: #03a9f4; //light-blue

你在用网页包吗？如果是，则可以在scss文件内的materialize.scss之前导入变量，然后在代码中导入该文件。如果不是，您使用的是什么加载程序或捆绑程序？@tusharrora是，更新了问题。我之前试过了，但没用。@Traxo我已经发布了答案，但如果你能发布更多的细节，比如你的项目目录结构，那就更好了。这将帮助我们更好地解决问题。@geeksal更新了文件夹结构，其中包含我认为可能相关的文件夹/文件。如果需要更多信息，请询问。@Traxo我已经更新了答案。让我知道你是否尝试过，结果如何。请使用inspect元素检查文件是否已加载。不正确的文件路径是我们最常犯的错误之一。是因为
app.scss
必须在根目录中，还是因为这个原因？到目前为止，这种方法似乎是有效的，在接受答案之前，我将花时间对其进行更多的测试。@Traxo不，
app.scss
不一定必须是根目录。举个例子。但正如我已经告诉你的，你应该始终小心道路。因此，当您将其移动到其他文件夹时，请确保相应地更新文件中的路径。是 啊你可以花自己的时间去测试。这个答案很接近。但是，要使用
color（）
函数，您可以先导入它，如下所示：
@import“./node\u modules/materialize css/sass/components/color variables”$原色：颜色（“红色”、“浅色-2”）@导入“./node_模块/materialize css/sass/materialize”
// main.scss - the order of the imports is important !!!
@import './_colors';
@import 'materialize-css/sass/materialize.scss';

// _colors.scss
$primary-color: #03a9f4; //light-blue