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


文章來源: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`


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM