sass安裝：webpack sass編譯失敗，node-sass安裝失敗的終極解決方

sass難言之隱-sass安裝的坑

之前花了很多時間折騰node-sass，發現sass老是安裝不上

從sass剛剛開始出來開始，就遇到ruby安裝sass失敗問題。換淘寶gem庫

gem sources --remove https://rubygems.org/

gem sources -a?https://ruby.taobao.org/

gem install sass

后面又死node-sass 安裝失敗一系列問題

《nodejs npm安裝本地node-sass失敗，ruby gem 安裝sass失敗總結》

總是在想，sass 為什么不用出一個純nodejs編譯器。

最先接觸的是less，可以直接引用js版編譯，在網頁直接運營，也有phpless，less在php中直接編譯，也可以在jsp中編譯。

sass用到現在，發現公司的網絡限制一個比一個狠。導致很難安裝。

依賴太多(ruby或者python2。你們是如何解決的——比如如何爭取權限

當然，stylu也是替代方案，但是想sass，如果時間充裕，我都想弄哦編譯sass的js的輪子。

sass.js與sassjs-loader救民眾于水火

https://www.npmjs.com/package/sass.js

https://www.npmjs.com/package/sassjs-loader

npm i?sass.js sassjs-loader

對于webpack ，在package移除node-sass 與 sass-loader

webpack.config 里面，對 module.rules 中sass-loader ，替換為sassjs-loader

模板工程：

https://github.com/zhoulujun/webpack4-vue2-project-template

https://github.com/zhoulujun/wepack4-react-project-template

如果是vue-cli 創建的工程

因為vue3.0后，vue-cli? 把webpack 封裝了n層，沒有經歷去取研究

同理在工程目錄：npm i sass.js sassjs-loader??vue-cli-service-sassjs

同時移除?@vue/cli-service

不是sass 是sass.js

或者把?@vue/cli-service 替換為我修改后的地址

"devDependencies": {

? ? "@vue/cli-plugin-babel": "^3.8.0",

? ? "@vue/cli-plugin-eslint": "^3.8.0",

? ??"@vue/cli-service": "^3.8.0",

? ? "babel-eslint": "^10.0.1",

? ? "eslint": "^5.16.0",

? ? "eslint-plugin-vue": "^5.0.0",

? ? "vue-template-compiler": "^2.6.10"

? },

替換為：

"devDependencies": {

? ? "@vue/cli-plugin-babel": "^3.8.0",

? ? "@vue/cli-plugin-eslint": "^3.8.0",

? ??"@vue/cli-service": "git+https://github.com/zhoulujun/vue-cli-service-sassjs",

? ? "babel-eslint": "^10.0.1",

? ? "eslint": "^5.16.0",

? ? "eslint-plugin-vue": "^5.0.0",

? ? "vue-template-compiler": "^2.6.10"

? },

但是還是有一個坑：非：https://www.npmjs.com/package/sass

原來安裝的是sass 而非sass.js

Browserslist: caniuse-lite is outdated. Please run next command `npm update caniuse-lite browserslist`

internal/modules/cjs/loader.js:638

? ? throw err;

? ? ^

Error: Cannot find module 'sass.js'

? ? at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)

? ? at Function.Module._load (internal/modules/cjs/loader.js:562:25)

? ? at Module.require (internal/modules/cjs/loader.js:690:17)

? ? at require (internal/modules/cjs/helpers.js:25:18)

? ? at Object.

? ? at Module._compile (internal/modules/cjs/loader.js:776:30)

? ? at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)

? ? at Module.load (internal/modules/cjs/loader.js:653:32)

? ? at tryModuleLoad (internal/modules/cjs/loader.js:593:12)

? ? at Function.Module._load (internal/modules/cjs/loader.js:585:3)

Browserslist: caniuse-lite is outdated. Please run next command `npm update caniuse-lite browserslist`

文章來源：sass安裝：webpack sass編譯失敗，node-sass安裝失敗的終極解決方