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

Question

我想在materialize _variables.scss中更改变量,例如

$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');

因为!默认我想我需要包括我_variables.scss之前包括物化,但我不知道如何.

那么设置我自己的变量的正确方法是什么$primary-color: color("blue", "lighten-2")(例如我想使用materialize _colors.scss中的预定义调色板)？

编辑1:我用vue-cli安装了vue2

编辑2:

文件夹结构:

??? build/
??? config/
??? dist/
??? node_modules/
?    ??? materialize-css
??? src/
?    ??? components
?    ??? router
?    ??? main.js
??? package.json
??? index.html

Answer 1

在更改物化css中的任何默认设置之前; 首先,您需要导入要更改其设置的组件.在此之后,您可以覆盖默认设置,然后您应导入materialise.例如,如果您想更改默认颜色然后创建一个文件,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的级别相同

现在你可以加载app.scss或者app.css在Vue 2中 加载require('../app.scss');

访问官方物化的github 仓库以查看完整的来源.