隨心DevOps前端之二：提一個pull request讓vuejs項目支持Sass

上文 我們用vue-cli構建了一個hello world程序

這一章我們要添加點東西，然後提一個pr（pull request）給自己，然後在web頁面上可視化的合併代碼

本文我要添加的是sass支持

通俗的講sass可以讓我們更方便的寫css，有興趣的了解，不影響本文的理解

進入項目目錄：

1.安裝依賴

npm install sass-loader node-sass webpack --save-devn

我們可以看到安裝了不少組件，因為vue-cli已經為我們添加了git的忽略文件 .gitignore ，所以我們不會將node_modules裡面新安裝的組件加到託管中上傳到git伺服器，而只是用package.json文件來記錄安裝了什麼

2.配置

在項目目錄裡面的

/build/webpack.base.conf.js

找到loaders列表，添加如下配置

{n test: /.sass$/,n loaders: [style, css, sass]n}n

即如下綠色部分

3.看效果

如何看效果呢，找到App.vue

修改style標籤：

<style>n#app {n font-family: Avenir, Helvetica, Arial, sans-serif;n -webkit-font-smoothing: antialiased;n -moz-osx-font-smoothing: grayscale;n text-align: center;n color: #2c3e50;n margin-top: 60px;n}n</style>n

改為：

<style lang="sass">nbodyn background: slateblue;n</style>n

即：

現在整個body都變成紫色了~

成功了，到這一步們修改了3個文件

• package.json
• webpack.base.conf.js
• App.vue

下面我要把這三個修改提交，並在github網頁上合併到主分支

在command line中（記得替換成自己的分支名字）

git statusngit commit -m "support sass"ngit push --set-upstream origin support-sassn

OK了，打開瀏覽器進到項目中

可以看到中間提示你，剛提交了一個分支

點擊 Compare & pull request

告訴你沒有衝突，並且列出了新分支與主分支的所有不同，你review一下，沒問題的話點擊 Create pull request

這裡你可以點擊 Close pull request 關閉這個pr，拋棄這些修改不理

也可以點擊 Merge pull request 合併這些修改到主分支

我們這裡選擇合併，讓主分支支持sass

合併過的分支你可以選擇刪除（建議刪除）

到這裡本文就結束了，是不是蠻優雅的，歡迎關注本專欄，讓你的開發更加優雅有序