嘗鮮使用vue-cli 3.0.0-beta.6，很容易就可以完成scss到vue項(xiàng)目中。

vue-cli 3提供了兩種方式集成sass/scss：

創(chuàng)建項(xiàng)目是選擇預(yù)處理器sass
手動安裝sass-loader
創(chuàng)建項(xiàng)目選擇預(yù)處理器sass
$ vue create vuedemo
? Please pick a preset: (Use arrow keys)

default (babel, eslint)
Manually select features
移動上下鍵選擇“Manually select features”：表示手動選擇創(chuàng)建項(xiàng)目的特性。

顯示如下：

? Check the features needed for your project: (Press to select, to t
oggle all, to invert selection)

( ) TypeScript
( ) Progressive Web App (PWA) Support
( ) Router
( ) Vuex
(*) CSS Pre-processors
( ) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
移動上下鍵在CSS Pre-processors，按提示點(diǎn)擊空格鍵選擇CSS-processors。

顯示如下：

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)

SCSS/SASS
LESS
Stylus
選擇第一個SCSS/SASS作為我們的CSS預(yù)處理器。

完成后項(xiàng)目會幫我們安裝sass-loader node-sass。

手動安裝
如果在創(chuàng)建項(xiàng)目沒有選擇CSS 預(yù)處理器，我們也可以手動安裝sass-loader node-sass來集成scss。

# Sass npm install -D sass-loader sass# Less npm install -D less-loader less# Stylus npm install -D stylus-loader stylus

使用
至此我們只需要在style指定lang為scss即可：

<style lang="scss"> $color = red; </style>

vue service clie會自動使用我們安裝的sass-loader作為scss內(nèi)容的加載器。

vue cli是基于webpack構(gòu)建項(xiàng)目，如果想對sass-loader傳遞一些配置項(xiàng)，可以在vue.config.js配置。在項(xiàng)目的根目錄下如果沒有找到vue.config.js，手動創(chuàng)建即可。如下：

// vue.config.js

const fs = require('fs') module.exports = {css: {loaderOptions: {sass: {data: fs.readFileSync('src/variables.scss', 'utf-8')}}} }

這個文件variables.scss也是可以通過import在.vue組件里引入。

總結(jié)

以上是生活随笔為你收集整理的vue-cli 3.0集成sass/scss到vue项目的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。