Vue進階（幺柒柒）：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

1

2

3

4

5

6

7

8

然后就可以導入相應的文件類型，或在 .vue 文件中這樣來使用：

1

2

3

下面主要講解一下vue中使用less或者sass的方法，以less為例(style.less)

主要是兩種

1.對于寫在vue文件中的less:

所有vue文件的,會被vue-loader處理編譯到一個css文件中，最終自動通過link標簽寫入index.html（在vue-loader.conf.js中配置）

1

2

3

4

5

6

7

8

9

10

1

2.對于外部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' },

1

2

3

4

1

注：

在vue2.x的webpack.base.conf.js：

{ test: /\.vue$/, loader: 'vue-loader', options: vueLoaderConfig },

1

2

3

4

5

這段是針對.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') }

1

2

3

4

5

6

7

8

9

所以不需要再在rules里寫.css .less 的處理規則了。

注

如碰到下面錯誤

Module build failed: TypeError: this.getResolve is not a function at Object.loader (F:\code\myGit\vue\node_modules\sass-loader\dist\index.js:52:26)

1

2

因sass-loader版本過高，webpack編譯失敗，解決方法：

修改sass-loader 版本(^8.0.0 => ^7.3.1)

npm install sass-loader@7.3.1 --save

1

拓展閱讀

vue-cli3文檔

《Vue進階（幺柒陸）：CSS預編譯語言Sass、Scss、Less和Stylus》

CSS Less Vue

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。