如何在vue中覆盖materializecss sass变量？

我想改变物化中的变量_变量.scss https://github.com/Dogfalo/materialize/blob/master/sass/components/_variables.scss e.g.

$primary-color: color("materialize-red", "lighten-2") !default;
$primary-color-light: lighten($primary-color, 15%) !default;
$primary-color-dark: darken($primary-color, 15%) !default;
/*...*/

在我的 Vue 2 中main.js我包括像这样的物化风格

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

因为!default http://sass-lang.com/documentation/file.SASS_REFERENCE.html#variable_defaults_我想我需要包括我的_variables.scss在包括实现之前，但我不知道如何实现。

那么设置我自己的变量的正确方法是什么，例如$primary-color: color("blue", "lighten-2")（我想使用来自 Materialise 的预定义调色板_颜色.scss https://github.com/Dogfalo/materialize/blob/master/sass/components/_color.scss)?

EDIT 1:我安装了 vue2vue-cli https://github.com/vuejs/vue-cli

EDIT 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'    

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

现在您可以加载app.scss or app.css在 Vue 2 中为require('../app.scss');

访问官方物化githubrepo https://github.com/Dogfalo/materialize用于查看完整源代码。