Vue 應用 Sass、Scss、Less 和 Stylus

大雄45發表於2021-11-05
導讀 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/,如需轉載,請註明出處,否則將追究法律責任。

相關文章