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 的處理規則。

原文來自：