vue項目啟動出現cannot GET /服務錯誤 查看控制台 是一些sass相關庫沒安裝成功 進行下麵操作進行安裝，再次啟動，完美解決！ 一、首先說明sass和scss的區別。 1、異同：1）簡言之可以理解scss是sass的一個升級版本，完全相容sass之前的功能，又有了些新增能力。語法形式上有 ...
vue項目啟動出現cannot GET /服務錯誤
查看控制台 是一些sass相關庫沒安裝成功
進行下麵操作進行安裝，再次啟動，完美解決！
一、首先說明sass和scss的區別。
1、異同：1）簡言之可以理解scss是sass的一個升級版本，完全相容sass之前的功能，又有了些新增能力。語法形式上有些許不同，最主要的就是sass是靠縮進表示嵌套關係，scss是花括弧
2）文件擴展名不同，Sass 是以“.sass”尾碼為擴展名，而 SCSS 是以“.scss”尾碼為擴展名
3）語法書寫方式不同，Sass 是以嚴格的縮進式語法規則來書寫，不帶大括弧({})和分號(;)，而 SCSS 的語法書寫和我們的 CSS 語法書寫方式非常類似。
//sass
.father
width:100px;
.son
width:50px;
//scss
.father{
width:100px;
.son{
width:50px;
}
}
2、 scss功能很強大的樣子，能做運算、寫函數啥的，但是我只是作為語法糖用而已，只看了些基礎功能
我個人常用的功能有：
- 嵌套
- 變數 $color : #111111;
- 混入 @mixin
- 繼承 @extend
3、一個關於@mixin、@extend、%placeholder的適用場景總結
- mixin 可以傳變數
- extend 不可以傳變數，相同樣式直接繼承，不會造成代碼冗餘；基類未被繼承時，也會被編譯成css代碼
- placeholder 基類未被繼承時不會被編譯成css代碼
二、
1、開始在vue項目中使用sass,在命令行輸入一下命令進行安裝（使用git命令行要用shift+insert 進行粘貼否則粘貼不上）
cnpm或npm install node-sass --save-dev //安裝node-sass
cnpm或npm install sass-loader --save-dev //安裝sass-loader
cnpm或npm install style-loader --save-dev //安裝style-loader 有些人安裝的是 vue-style-loader 其實是一樣的！
2. 這個時候你打開build文件夾下麵的webpack.base.config.js
把裡面的module改成這樣的
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'),
resolve('test')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
},
{ //從這一段上面是預設的！不用改！下麵是沒有的需要你手動添加，相當於是編譯識別sass!
test: /\.scss$/,
loaders: ["style", "css", "sass"]
}
]
}
3.在需要用到sass的地方添加lang=scss
<style lang="scss" scoped="" type="text/css">
//你的sass語言 $primary-color: #333;
body {
color: $primary-color; //編譯後就成了 color:#333;類似於js的變數！
}
</style>
sass的一些其它用法可以查看官網！
