第二章 node-sass安裝

接下來咱們來安裝css-loader。

vue3.0上，沒有webpack.config.js也不用安裝，只須要在目錄下建立一個vue.config.js就能夠實現同樣的效果。

首先，咱們先建立vue.config.js在根目錄下。而後添加代碼，以下

 1 module.exports = {
 2     chainWebpack: config => {
 3         config.module.rule("vue")
 4             .use("vue-loader")
 5             .loader("vue-loader")
 6             .tap(options => {
 7                 options.loaders = {
 8                     'scss': 'vue-style-loader!css-loader!sass-loader',
 9                     'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
10                 };
11                 return options;
12             })
13     },
14     devServer: {
15         port: 8085,
16         host: 'localhost',
17         https: false,
18         open: true,
19         proxy: {
20             '/api': {
21                 target: '<url>',
22                 ws: true,
23                 changeOrigin: true
24             }
25         }
26     }
27 }

 

這裏添加兩部分一部分是webpack裏的相關加載的信息，另外一部分是服務器配置信息，如端口號、https是否開啓，以及是否自動在瀏覽器中打開網站。還有相關域名，咱們能夠在本地的hosts中添加生產的域名，而後，在這使用生產域名來保證網站中域名限制。

而後咱們驗證一下是插件是否都安裝了。打開App.vue，在下面<style>裏添加lang="scss"

<style lang="scss">

 

而後咱們看到了錯誤。PS:熱部署修改完自動編譯。

下一步咱們安裝sass-loader，直接打開Terminal窗口，執行命令

npm install --save-dev sass-loader

 

安裝完成，咱們在代碼裏，再隨便改個地，再改回來，代碼就編譯了。而後繼續報錯，這回是沒有node-sass，繼續裝

npm install --save-dev node-sass

出錯，須要python，build

python須要安裝2.X，傳送門：https://www.python.org/downloads/release/python-2715/

 

若是安裝位置不是默認的小夥伴們，在執行時還會報找不到的錯誤 ，那麼請在path裏把你安裝的路徑加上。而後再不行，重啓ide就行了。。而後是下一個錯誤

build失敗。。以前我在別的機器上安裝了一下午。各類不行，看到別的經驗，是要先把以前的包卸載了，從新安裝。。

npm uninstall node-sass

這回我電腦是win10，報error MSB8036: 找不到 Windows SDK 版本8.1。

以前電腦是win7，報error MSB3428: 未能加載 Visual C++ 組件「VCBuild.exe」。

解決方法：這個執行下面兩句就好了

npm install -g node-gyp
npm install --global --production windows-build-tools

須要管理員權限。關上ide，用管理員權限運行，從新打開ide

而後就坐着乾等着。我是去吃了頓飯，回來沒安完，又逛了逛網頁。安完了。

繼續安正式，node-sass，瞬間安完。。。orz

 

啓動編譯器
綠V又回來了。今天就到這。再水一篇~

下一章咱們講路由router

 

感謝，參考：http://www.javashuo.com/article/p-synifmpb-ha.html