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

【问题标题】：How to override materializecss sass variables in vue?如何覆盖vue中的materializecss sass变量？
【发布时间】：2017-07-16 10:54:07
【问题描述】：

我想更改具体化 _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

【问题讨论】：

你在使用 webpack 吗？如果是，那么您可以在 scss 文件中的 materialize.scss 之前导入您的变量，然后将该文件导入您的代码中。如果不是，您使用的是什么加载器或捆绑器？
@TusharArora 是的，更新的问题。我之前尝试过，但没有成功。
@Traxo 我已经发布了答案，但是如果您可以发布更多详细信息（例如项目目录结构）会更好。这将帮助我们以更好的方式解决问题。
@geeksal 更新了文件夹结构，其中包含我认为可能相关的文件夹/文件。如果需要更多信息，请询问。
@Traxo 我已经更新了我的答案。让我知道您是否尝试过，结果如何。请使用检查元素检查文件是否已加载。不正确的文件路径是我们最常犯的错误之一。

标签： sass materialize vuejs2 vue.js

【解决方案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');

访问官方物化githubrepo查看完整源码。

【讨论】：

app.scss 是否有理由必须在根目录下，或者仅仅是举例？到目前为止，这种方法似乎是有效的，我会在接受答案之前花时间进行更多测试。
@Traxo 不，app.scss 不必在根目录中。这只是一个例子。但正如我已经说过的那样，你应该始终小心路径。因此，当您将其移动到其他文件夹时，请确保在文件中相应地更新路径。是的！你可以花点时间去测试。

【解决方案2】：

然而，在 mattrialize 1.0.0 中，遵循这些准则来覆盖具体化颜色：

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

覆盖值的定义必须在导入materialize.scss之前发生，也就是说不能使用color()等matrial函数

示例：

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

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

【讨论】：

这个答案很接近。但是，要使用color() 函数，您可以先导入它，如下所示：@import "../node_modules/materialize-css/sass/components/color-variables"; $primary-color: color("red", "lighten-2"); @import "../node_modules/materialize-css/sass/materialize";