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樣式的不同方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
