用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，不然会产生依赖找不到的问题。