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

Question

我想在实现中更改变量 _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');

因为 !default 我想我需要在包含实体化之前包含我的 _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；首先，您需要导入要更改设置的组件。在此之后，您可以覆盖默认设置，然后您应该导入具体化。例如，如果您想更改默认颜色，则创建一个文件，例如 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 repo 查看完整源代码。

Answer 2

然而，在 matrialize 1.0.0 中，按照这些准则来覆盖物化颜色：

定义要覆盖的变量的值（例如 $primary-color）
导入 materialize.scss 库

覆盖值的定义必须出现在之前导入materialize.scss，这意味着您不能使用诸如color()[=11之类的矩阵函数=]

示例：

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

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

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

How to override materializecss sass variables in vue?

sass

materialize

vue.js

vuejs2