sass安装：webpack sass编译失败，node-sass安装失败的终极解决方

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安装失败的终极解决方》,
请注明出处：https://www.zhoulujun.cn/html/webfront/ECMAScript/nodejs/8143.html