用vue-cli搭建项目踩过的坑

Posted 2020-09-28 ——海

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)

@ ./~/[email protected]!./~/[email protected]?{"minimize":false,"sourceMap":false}!./~/[email protected]/lib/style-compiler?{"vue":true,"id":"data-v-1c89a140","scoped":false,"hasInlineConfig":false}!./~/[email protected]/lib/loader.js?{"sourceMap":false}!./~/[email protected]/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/[email protected]/index.js?{"minimize":false,"sourceMap":false}!./mint-ui/lib/style.css in ./~/[email protected]?{"minimize":false,"sourceMap":false}!./~/[email protected]/lib/style-compiler?{"vue":true,"id":"data-v-1c89a140","scoped":false,"hasInlineConfig":false}!./~/[email protected]/lib/loader.js?{"sourceMap":false}!./~/[email protected]/lib/selector.js?type=styles&index=0!./src/components/index/index.vue

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

 

5. 如果改了项目文件夹的名字，需要删除node-modules重新npm i，否则会产生依赖找不到的问题。