Question

我想在materialise _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")（我想使用materialise _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

的级别相同

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

访问官方物化的github repo以查看完整的来源。

Answer 2

但是在matarialize 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

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

2 个答案: