uncategorized

Visual Studio Code寫SCSS，並自動編譯為CSS

早期都用Sublime來寫Compass或是SCSS，畢竟透過這類工具寫這種CSS有很多套件且又可以自動幫我編譯成CSS，用起來還滿順手，不過，隨著Visual Studio Code越來越強大，且套件可安裝也越來多，重點還可以是中文的

要開始寫SCSS前，記得必須安裝SCSS相關套件，基本上在Visual Studio Code的Marketplace上可以找到很多，再來就必須在你電腦上安裝好Node.js和npm工具，要把SCSS編譯成CSS，必須靠這兩個工具幫忙

開始設定Visual Studio Code

可以在VS Code中安裝npm套件，這樣可以在VS.Code內執行npm指令

用Ctrl+Shift+P開啟命令列，並執行下面指令，開始安裝Sass相關套件，記得網路要通，因為會到Github上抓取套件

1
npm install -g node-sass less

這時候寫一個簡單的SCSS程式

1
2
3
4
5
6
7
8
9
.A1 {
    .A2 {
        width: (100/2)px;
        height: 100px;
    }
    .A2 {
        color: red;
    }
}

在偵錯地方開啟task選擇Configure Task Runner後

再選擇設定Other

Task.json檔案中設定如下

1
2
3
4
5
6
7
8
9
{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "0.1.0",
    "command": "node-sass",
    "isShellCommand": true,
    "args": ["test.scss", "test.css"],
    "showOutput": "always"
}

設定完成後，會在跟SCSS檔案同目錄下多出一個.VSCode的目錄裡面會有一個Task.Json檔案，然後用Ctrl+Shift+B開始編譯，最明顯地方在於(100/2)，這邊在CSS會等於是50，所以，看編譯完成後得CSS檔案，這樣就完成編譯成CSS

1
2
3
4
5
6
.A1 .A2 {
  width: 50 px;
  height: 100px; }
.A1 .A2 {
  color: red; }

自動編譯CSS

上面方式可以讓SCSS編譯為CSS，但這還不好，因為每次都要用Ctrl+Shift+B編譯它，似乎又很麻煩，如果可以自動編譯就更好了，所以，要再安裝兩個套件，一樣可以直接在VS.Code去執行指令

1
2
npm install -g gulp
npm install gulp gulp-sass gulp-less

安裝完畢後，在和SCSS同一個目錄下又會多出node_module目錄，裡面會有gulp相關指令，這時候還沒有完畢，必須在主目錄下產生一個gulpfile.js檔案，並在檔案中設定下面指令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// Sass configuration
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function() {
    gulp.src('*.scss')
        .pipe(sass())
        .pipe(gulp.dest(function(f) {
            return f.base;
        }))
});
gulp.task('default', ['sass'], function() {
    gulp.watch('*.scss', ['sass']);
})

如果想要監控主目錄下所有的資料夾，可以修改成/**/*.scss

1
2
3
4
5
6
7
8
9
10
11
gulp.task('sass', function() {
    gulp.src('./scss/**/*.scss')
        .pipe(sass())
        .pipe(gulp.dest(function(f) {
            return f.base;
        }))
});
gulp.task('default', ['sass'], function() {
    gulp.watch('./scss/**/*.scss', ['sass']);
})

若是想要把輸出的.CSS檔案換成自己想要的目錄，把原本這一段

1
2
3
gulp.dest(function(f) {
return f.base;
}

換成

1
.pipe(gulp.dest('./CSS/'))

之後再回去修改原本的Task.json，讓它去監控同目錄下的SCSS檔案，當檔案有變更時候，能自動進行編譯

1
2
3
4
5
6
7
8
9
10
11
12
13
{
    "version": "0.1.0",
    "command": "gulp",
    "isShellCommand": true,
    "tasks": [
        {
            "taskName": "default",
            "isBuildCommand": true,
            "showOutput": "always",
            "isWatching": true
        }
    ]
}

都設定完成後依舊還是必須執行Ctrl+Shift+B，這時候可以發現Output視窗，每當你有修改SCSS並儲存後，就會開始編譯，因為這時候已經啟動Watch File機制了，另外，Watch資料機制必須在啟動Watch前把資料夾建立好，如果在啟動Watch後建立資料夾，這樣該資料內的SCSS就不會更新，必須重新啟動Watch指令了

Share