從不停下來的學習
  • Home
  • About
  • Links
  • Ghost
  • Docker
  • VueJS
  • Stable Diffusion
Sign in Subscribe

SCSS

VueJS 中設定共用的 Sass 變數

VueJS 中設定共用的 Sass 變數

上回架設了基本的 VueJS 開發環境,接下來要進行一些設定。因為在這個架構下,可以很方便的預處理SASS,基本上不用另外設定,但是之前在 NuxtJS 中已經有 SASS 中設定變數不能共用的問題。不過現在 vue-loader 已經有官方解決方法,就是使用 sass-resources-loader 載入global的變數。 用法很簡單,使用 'npm' 安裝 $ npm install sass-resources-loader --save-dev 在 build/utils.js 中設定 scss: generateLoaders('sass').concat( { loader: 'sass-resources-loader', options: { resources: path.resolve(__dirname, '../src/style/_variables.scss') } } ) 這樣你就可以把變數都放進 _variables.scss
Edmond Yip Dec 8, 2017
Sass in NuxtJS

Sass in NuxtJS

以前對Sass/SCSS等需要預處理的CSS Style有一定抗拒,因為需要安裝一堆應用程式,每次更新都需要處理一次,但是現在在NuxtJS中有Vue Loader處理,不論那一種需要預處理的CSS都可以輕鬆搞定。 在多種預處理的CSS中我先是賞試了Sass,不用再加任何標點符號真的很棒! Sass nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; } 原本是這樣的CSS nav ul margin: 0 padding: 0 list-style: none li display: inline-block a display: block padding: 6px 12px
Edmond Yip Apr 10, 2017

Subscribe to 從不停下來的學習

Subscribe 以取得最新消息!
©256pages