我似乎找不到很多关于在Sass中覆盖Materialize颜色的教程。我唯一能找到的教程是下载Sass文件,然后通过编辑_variables.scss和重新编译得到新的CSS文件,直接将其集成到项目中。
理想情况下,我希望使用NPM包,这样我就不用手动更新Sass文件夹了。所以,我的目的是使用NPM包 "materialize-css "并以某种方式覆盖Sass中的颜色。
我已经设置了一个React测试项目。我的代码如下。
INDEX.JS
import React from 'react';
import ReactDOM from 'react-dom';
import './index.scss';
import App from './App';
import "materialize-css/dist/js/materialize.min.js"; //This is for JS functionality
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
索引.scss
@import "materialize-css/sass/materialize.scss";
// $primary-color: #346BA7 !default;
// @import "materialize-css/sass/components/_variables.scss";
// **The commented lines above do not work**.
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
}
...
在index.scss中,这是我想做主题的地方。谁能告诉我正确的方向?
谢谢你。
我想我已经想通了,但不知道这是不是最好的方法,所以如果有人知道更好的方法,请告诉我。
@import "../node_modules/materialize-css/sass/components/_color-variables.scss";
$primary-color: color("blue-grey", "lighten-2") !default;
$primary-color-light: lighten($primary-color, 15%) !default;
$primary-color-dark: darken($primary-color, 15%) !default;
$secondary-color: color("amber", "lighten-1") !default;
@import '../node_modules/materialize-css/sass/materialize.scss';