在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遇到的問題做一些記錄，同時希望其他遇到同樣問題的朋友可以避免。