如何覆蓋vue中的materializecss sass變量？

我想改變物化實例_variables.scss例如如何覆蓋vue中的materializecss sass變量？

$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")（我想使用物化_colors.scss預定義的調色板）？

編輯1：我安裝vue2與vue-cli

編輯2：

文件夾結構：

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

來源

2017-02-25 Traxo

你使用的是webpack嗎？如果是，那麼您可以在scite文件內的materialize.scss之前導入變量，然後在代碼中導入該文件。如果不是使用什麼裝載機或捆綁機？ –

@TusharArora是的，更新的問題。我早些時候嘗試過，但沒有奏效。 – Traxo

@Traxo我已經發布了答案，但是如果您可以發佈更多細節，比如您的項目目錄結構，會更好。這將有助於我們以更好的方式解決問題。 – geeksal

在更改物化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用於查看完整源代碼。

來源

2017-02-28 17:46:20 geeksal

是否有一個原因，'app.scss'必須在根目錄下，或者僅僅是例如？到目前爲止，似乎這種方法正在起作用，在接受答案之前，我只需花時間進行更多的測試。 – Traxo

@Traxo不，不需要'app.scss'必須位於根目錄下。這只是例如。但正如我已經說過，你應該小心路徑。因此，當您將其移動到其他文件夾時，請確保您在文件中相應地更新路徑。是啊！你可以花你自己的時間來測試。 – geeksal

-1

要定製兌現，CSS，你必須下載兌現CSS源（Sass版本）materializecss。這將包含源.scss文件。提取的源文件將具有名爲sass的文件夾。在這個文件夾中你會發現materialize.scss文件。這是我們的源文件，我們從中生成實際的物化css。您可以更改源_variables.scss並在materialize.scss文件存在的文件夾中運行以下命令：

sass materialize.scss materialize.css

這將產生materialize.css，你可以在你的vue.js代碼中使用。你可以得到更多的細節here。

不完全相關，但this question使用類似的方法來定製引導與vue.js.使用

來源

2017-02-28 05:57:29 Saurabh

這是一個不好的方法。 Materialize使用！默認變量，這些變量可以通過在materialize.scss之前導入_variables.scss輕鬆覆蓋。絕對不需要從源代碼生成CSS。 –

[更多]（https://medium.com/@mancebo128/how-to-properly-add-custom-colors-to-materialize-css-52e5e4c58d58#.w6m86v8f4）文章支持這一點。 – Saurabh

因此，一旦Materialize.scss中的版本發生變化，您需要重新編譯才能使用它？如果使用某種模塊捆綁器，這個過程將如我在上述評論中所解釋的那樣簡單。看看https://github.com/webpack-contrib/sass-loader –

如何覆蓋vue中的materializecss sass變量？

回答

相關問題