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安裝失敗的終極解決方