如何在Vue中覆盖materializecss sass变量? [英] How to override materializecss sass variables in vue?

问题描述

我想在实现 _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中，我加入了这样的物化风格

In my Vue 2 main.js I include materialize style like this

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

由于！默认，我想我需要包括我的_variables.scss在包含实现之前，但我不知道如何.

Because of !default I guess I need to include my _variables.scss before including materialize, but I don't know how.

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

So what's the proper way to set my own variables e.g. $primary-color: color("blue", "lighten-2") (I want to use predefined palette from materialize _colors.scss)?

我用 vue-cli 安装了vue2

EDIT 1: I installed vue2 with vue-cli

文件夹结构:

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

推荐答案

在更改实体化CSS中的任何默认设置之前；首先，您需要导入要为其更改设置的组件.此后，您可以覆盖默认设置，然后应该导入实现.例如，如果要更改默认颜色，则创建一个文件，例如app.scss，然后编写以下代码:

Before changing any default settings in materialized css; first, you need to import the component for which you want to change the settings for. After this you can override the default settings and then you should import materialize. For example if you want to change default color then create a file for example app.scss then write following code:

//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处于同一级别

Note: app.css must be included in your page. As per my example app.css must be in your project root folder i.e. at same level as that of index.html

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

Now you can load app.scss or app.css in Vue 2 as require('../app.scss');

访问正式物化的github repo ，以查看完整的源代码.

Visit official materialized github repo for viewing complete source.

这篇关于如何在Vue中覆盖materializecss sass变量?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！