在Nuxt中使用scss語法

2021-10-10 17:44:31 字數 912 閱讀 1282

npm i -d node-sass sass-loader
sass基礎語法說明

注意:一定要寫上lang="scss"才可以使用scss語法

在assets目錄下新增檔案:my-global.scss

$base-color: red;

.my-btn

css: [

//以下兩種引入方式都可以

,'~/assets/my-global.scss',

......

]

......

......

在頁面中不能使用全域性定義的scss變數

沒錯,又是外掛程式。

npm i -d @nuxtjs/style-resources
修改nuxt.config.js檔案,新增內容

這裡配置,採用的是nuxt 2.0.0版本

modules: [

'@nuxtjs/style-resources'

],styleresources: ,

在使用nuxt的2.14.12及以上版本時,配置有不同

//主要就是這裡改為了buildmodules

buildmodules: [

'@nuxtjs/style-resources'

],styleresources: ,

這樣就可以在頁面中使用全域性scss中定義的變數了。

注意,頁面的style標籤中一定要新增lang="scss"屬性。

17 在rails中使用scss

在上節課我們rails中使用coffeescript雖然有問題,但是這個跟系統是windows估計有關,不過我們可以先用每個頁面去寫普通的script標籤就行了。下面講解css樣式在網頁開發中的作用,因為我們前面只是簡單的html頁面 所以頁面就很簡陋,而為了提高使用者體驗美化頁面就用到了css樣式...

在nuxt中使用路由重定向

我們都知道,在寫spa的時候,我們可以通過配置vue router來實現路由的重定向。官方文件 以及ts型別 的定義中給出了這一選項 inte ce routeconfig 也就是說,我們可以定義這樣乙個路由 這樣,我們在訪問 foo的時候,就會被重定向到 foo bar。這些都是老生常談了。然而,...

在Nuxt中使用Antv G2plot

經過一番測試下來,官網提供的注入vue例項的方法最適合,文件中是這樣描述的 有時您希望在整個應用程式中使用某個函式或屬性值,此時,你需要將它們注入到vue例項 客戶端 context 伺服器端 甚至 store vuex 按照慣例,新增的屬性或方法名使用 作為字首。將內容注入vue例項,避免重複引入...