node-sass報錯解決方案

在Vue.js中，每一個vue檔案都是一個組件，在.vue檔案中可以將模板，指令碼，樣式寫在一起，便於組織整個組件。在使用template，script時，編寫css樣式時，都進行的特別順利，唯獨當我想用sass來預先處理css時，在style下使用lang='sass'一直報錯。

在.vue中是這樣的。

<template ><div class="haha">    <p>        keith + {{ message }}    </p></div></template><script>export default {    data () {        return {            message: ' Hello world'        }    }}</script><style lang = 'sass' scoped>    </style>

運行webpak就報錯。

我相信很多人跟我一樣，在安裝node-sass都會報出這個錯誤。經過一個下午的折騰，終於找到知道原因了。

解決方案 ： 找到node_modules下的node-sass檔案，進入，如果沒有vendor檔案夾，就建立一個空檔案夾，命名為vendor。 運行 webpack 。 接著還是報錯。
錯誤顯示 在vendor檔案夾下找不到某個 .node檔案，此時到node-sass官網的release頁面下找到相應的檔案，然後下載到相應的檔案目錄。傳送門：node-sass官網 記住下載相應的版本。 完成之後，運行webpack...等待中。 如果成功了，恭喜你，可以在vue檔案中使用sass來預先處理css了。如果沒有成功，還是會報錯。錯誤資訊如下。

提示讓我們重新rebuid node-sass，這是因為我們在前幾步中重新加入了一個檔案，而此時webpack並沒有執行到。於是乎，開啟cmd，運行

cnpm rebuild node-sass --save-dev 執行webpack。

編譯成功。

這裡給自己在學習webpack遇到的問題做一些記錄，同時希望其他遇到同樣問題的朋友可以避免。