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

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

sass難言之隱-sass安裝的坑

之前花了很多時(shí)間折騰node-sass,發(fā)現(xiàn)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失敗總結(jié)

總是在想,sass 為什么不用出一個(gè)純nodejs編譯器。

最先接觸的是less,可以直接引用js版編譯,在網(wǎng)頁直接運(yùn)營,也有phpless,less在php中直接編譯,也可以在jsp中編譯。

sass用到現(xiàn)在,發(fā)現(xiàn)公司的網(wǎng)絡(luò)限制一個(gè)比一個(gè)狠。導(dǎo)致很難安裝。

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

當(dāng)然,stylu也是替代方案,但是想sass,如果時(shí)間充裕,我都想弄哦編譯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 創(chuàng)建的工程

因?yàn)関ue3.0后,vue-cli? 把webpack 封裝了n層,沒有經(jīng)歷去取研究

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

同時(shí)移除@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"

? },

但是還是有一個(gè)坑:非: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`

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容