Vue 應用 Sass、Scss、Less 和 Stylus
導讀 | Vue專案中應用前處理器,可以有效減少css程式碼量, 推薦使用Sass、Scss、Less前處理器。在建立專案的時候可以選擇前處理器 (Sass/Less/Stylus)。 |
如果當時沒有選擇,內建的 webpack 仍然會被預配置為可以完成所有的處理,也可以手動安裝相應的 webpack loader:
# Sass npm install -D sass-loader node-sass # Less npm install -D less-loader less # Stylus npm install -D stylus-loader stylus
然後,就可以匯入相應的檔案型別,或在 .vue 檔案中這樣來使用:
<style> $color: red; </style>
下面主要講解一下vue中應用less或者sass的方法,以less為例(style.less)。
寫在 vue 中的 less
所有vue檔案的
,會被vue-loader處理編譯到一個css檔案中,最終自動透過link標籤寫入index.html(在vue-loader.conf.js中配置)
<style scoped> .notFoundPage { background-color: #0a8acd; color: #fff; position: relative; h1 { font-weight: 500; } } </style>
<link href="/static/css/app.21d3ff57a1596ef90908ba816fbb9496.css" rel="stylesheet">
對於外 less 檔案
在main.js中import style.less 。
此時webpack會把style.less和各個vue檔案的less部分一起編譯到同一個css檔案,並在index.html的link中自動引入。
在webpack的入口檔案entry中加上style.less,編譯完的出口檔案會被自動注入到index.html檔案中。
entry: { app: './src/main.js', style: './src/style/style.less' },
<script type="text/javascript" src="/static/js/style.c67fefaf3f60c5ca074a.js"></script>
注:在vue2.x的webpack.base.conf.js:
{ test: /\.vue$/, loader: 'vue-loader', options: vueLoaderConfig },
以上是針對.vue檔案的處理規則,其中vueLoaderConfig是vue-cli自己定義的載入器,專門處理css樣式。
vueLoaderConfig引用的utils.js:
return { css: generateLoaders(), postcss: generateLoaders(), less: generateLoaders('less'), sass: generateLoaders('sass', { indentedSyntax: true }), scss: generateLoaders('sass'), stylus: generateLoaders('stylus'), styl: generateLoaders('stylus') }
所以不需要再在rules裡寫.css .less 的處理規則。
原文來自:
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69955379/viewspace-2840714/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- less,sass,stylus配置和應用教程及三者比較
- sass/scss 和 less的區別CSS
- css前處理器--Sass,Less,StylusCSS
- LESS/SASS/Stylus開發工具彙總
- [sass 基礎] .sass 和 .scss 區別CSS
- SCSS 和 SASS 區別CSS
- vue中sass與SCSS的區別VueCSS
- SASS 和 SCSS 的區別CSS
- 詳細比較三個CSS前處理器(框架)Sass/LESS/StylusCSS框架
- 關於sass、scss、less的概念性知識彙總CSS
- postcss支援vue/less/css/sass檔案CSSVue
- sass和less的區別
- 在 Create React App 中啟用 Sass 和 LessReactAPP
- 使用 Nginx 編譯 Sass 和 ScssNginx編譯CSS
- Sass/Scss 基礎篇CSS
- vue專案中如何全域性引入scss/sass檔案VueCSS
- 如何在 vue-cli v3.0 中使用 SCSS/SASSVueCSS
- Stylus| vue專案中stylus和stylus-loader版本相容問題Vue
- webstrom配置sass與lessWeb
- Prettier美化css/scss/sass程式碼CSS
- less的介紹和應用
- LESS與SASS的區別
- vue裡怎麼用scssVueCSS
- 在vue單頁面應用當中使用sassVue
- Mac下scss/sass自動轉cssMacCSS
- 前端之Sass/Scss實戰筆記前端CSS筆記
- 細談sass和less中的變數及其作用域變數
- 【Sass/SCSS】我花4小時整理了的Sass的函式CSS函式
- sass與gulp應用
- webstorm配置scss/less轉wxss,小程式配置scss轉wxssWebORMCSS
- 【Sass/SCSS】預載入器中的“軒轅劍”CSS
- css前處理器scss/sass語法以及使用CSS
- vue 2.0開發專案中stylus 的配置和使用Vue
- Stylus在VUE2.0以上的使用Vue
- webpack的css,less,sass中使用絕對路徑WebCSS
- 在 vue-cli 腳手架中引用 jQuery、bootstrap 以及使用 sass、less 編寫 css [vue-cli配置入門]VuejQuerybootCSS
- react1.6版本新增sass與less的支援React
- Facebook 重構:拋棄 Sass / Less ,迎接原子化 CSS 時代CSS