vue-cli中已經內置配置好了sass 以及lass的配置。如果需要的話直接下載兩個模塊就可以了,webpack它會根據 lang 屬性自動用適當的加載器去處理。

如果需要使用sass，則安裝：

npm install node-sass --save-dev npm install sass-loader --save-dev 

如果需要使用less，則安裝：

npm install less --save-dev npm install less-loader --save-dev 

sass的內聯寫法：

<style lang="sass" scoped>  //sass樣式 </style> 

less的內聯寫法：

<style lang="less" scoped>  //less樣式 </style> 

css的內聯寫法：

<style lang="css" scoped>  //css樣式 </style> 

sass的引用寫法：

<style lang="sass" src="./index.sass"></style> 

less的引用寫法：

<style lang="less" src="./index.less"></style> 

css的引用寫法：

<style lang="css">    @import './index.css' </style>  或者 <style lang="css" src="./index.css"></style> 

以上就是本人對結合webpack插件extract-text-webpack-plugin單文件組件css編譯提取使用的一點心得，歡迎指正，謝謝！

這篇淺談Vue-cli單文件組件引入less,sass,css樣式的不同方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持錯新站長站。