用vue-cli搭建項目踩過的坑

1. 須要額外安裝sass-loader：

我覺得vue-cli會安裝全部與css相關的loader,然並不是，爲這個死了不少腦細胞。

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

2. 修改style標籤：

打開src目錄下的components目錄中的App.vue文件。而後修改 style標籤以下: 

<style lang="sass" rel="stylesheet/sass">

　　

3. sass 和 scss 的區別：

Module build failed:
body, html {
^
Invalid CSS after "body, html {": expected "}", was "{"
in E:\workspace\my-project\src\common\scss\base.sass (line 1, column 13)

@ ./~/.3.0.1@vue-style-loader!./~/.0.28.4@css-loader?{"minimize":false,"sourceMap":false}!./~/.12.2.2@vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-1c89a140","scoped":false,"hasInlineConfig":false}!./~/.6.0.6@sass-loader/lib/loader.js?{"sourceMap":false}!./~/.12.2.2@vue-loader/lib/selector.js?type=styles&index=0!./src/components/index/index.vue 4:14-437 13:3-17:5 14:22-445
@ ./src/components/index/index.vue
@ ./src/router/index.js
@ ./src/main.js
@ multi ./build/dev-client ./src/main.js

錯誤提示：無效的css。由於sass語法不使用大括號和分號。
若是你喜歡使用不帶大括號的語法，只要去掉css代碼的大括號和分號，即便用縮進語法。
若是你但願使用帶大括號的語法，即SCSS
那麼，你須要把

<style lang="sass" rel="stylesheet/sass"> 改爲 <style lang="scss" rel="stylesheet/scss">

而且若是有引入的scss文件，後綴名也要用.scss，（既然選擇用.scss，確定整個項目中全部單獨的命名文件都用.scss了），以下：

@import "../../common/scss/index.scss";

 

4. 若是有公共的.scss文件，須要再index.scss中引入的話，不可引入控的.scss文件。我踩的這個坑真的把我折磨的夠嗆，以下：

@import "./base";
// @import "./public";    若是public.scss爲空的話，不可引入，不然報錯，根據錯誤提示也很難找出緣由
// @import "./third-library";

附帶報錯提示：

This dependency was not found:

* -!../../../node_modules/.0.28.4@css-loader/index.js?{"minimize":false,"sourceMap":false}!./mint-ui/lib/style.css in ./~/.0.28.4@css-loader?{"minimize":false,"sourceMap":false}!./~/.12.2.2@vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-1c89a140","scoped":false,"hasInlineConfig":false}!./~/.6.0.6@sass-loader/lib/loader.js?{"sourceMap":false}!./~/.12.2.2@vue-loader/lib/selector.js?type=styles&index=0!./src/components/index/index.vue

To install it, you can run: npm install --save -!../../../node_modules/.0.28.4@css-loader/index.js?{"minimize":false,"sourceMap":false}!./mint-ui/lib/style.css

 

5. 若是改了項目文件夾的名字，須要刪除node-modules從新npm i，不然會產生依賴找不到的問題。