home > webfront > ECMAS > npm-node >

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

hits:

sass難言之隱-sass安裝的坑,現在終于有了避過的方法,小小吐槽一下,然后分享閉坑方法:sass js與sassjs-loader救民眾于水火

sass難言之隱之node-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失敗敗總結

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

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

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

當然,stylu也是替代方案,但是想sass,sass為什么非得要依賴一堆雜七雜八的包呢。純js編譯方案有木有?

其實只是沒有仔細琢磨

修改sass-loader配置項改為dart-sass

sass-loader配合dart-sass只要簡單地添加一個選項就行了.全局搜索 loader: 'sass-loader',替換為

{

    loader: 'sass-loader',

        options: {

            implementation: require('sass'),

    },

}

這個,確實沒有去仔細看文檔!原來如此簡單啊。

sass-loader配置項

implementation參數

The special implementation option determines which implementation of Sass to use.

By default the loader resolve the implementation based on your dependencies. Just add required implementation to package.json (node-sass or sass package) and install dependencies.

{
  test: /\.s[ac]ss$/i,
  use: [
    'style-loader',
    'css-loader',
    {
      loader: 'sass-loader',
      options: {
        // Prefer `dart-sass`
        implementation: require('sass'),
      },
    },
  ]
}

好了,可以放心用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

{
  test: /\.scss$/,
  use: [{
    loader: "style-loader" // 將 JS 字符串生成為 style 節點
  }, {
    loader: "css-loader" // 將 CSS 轉化成 CommonJS 模塊
  }, {
    loader: "sassjs-loader" // 將 Sass 編譯成 CSS
  }]
}

模板工程:

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 地方 替換為sass.js 即可。


轉載本站文章《sass安裝:webpack sass編譯失敗,node-sass安裝失敗的終極解決方》,
請注明出處:http://www.qsexmk.tw/html/webfront/ECMAScript/nodejs/8143.html