Vue CLI2 項目 node-sass切換爲dart-sass

sass於2016年11月1日在博客正式對外公佈了alpha版本的Dart Sass 42項目，即他們使用Dart對Sass進行了重寫。至於緣由反正就是屌····

公司項目大部分是基於vue cli2構建的，默認固然也是用node-sass來處理sass或scss的，每次有小夥伴們clone下來項目後一頓操做，npm i就卡到node-sass上了（雖然我認爲紅杏出牆是搬磚程序員必備技能但····）

今天就把node-sass換掉吧，參考sass-loader文檔

build/utils.js

generateLoaders方法裏

修改前

return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }
複製代碼

修改後

return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    // to use Dart Sass
    sass: generateLoaders("sass", {
      indentedSyntax: true,
      implementation: require("sass")
    }),
    scss: generateLoaders("sass",{
      implementation: require("sass")
    }),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }
複製代碼

而後npm i sass -D 記得uninstall掉node-sass

好了