我想在 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');
因为!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
最佳答案
在更改物化 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查看完整的源代码。
关于sass - 如何覆盖 vue 中的 materializecss sass 变量?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42458439/