feat(cli): support sass-loader v8 #776

packages/uni-cli-shared/lib/scss.js

+const semver = require('semver')
+
+let sassLoaderVersion
+try {
+  sassLoaderVersion = semver.major(require('sass-loader/package.json').version)
+} catch (e) {}
+
 const SCSS =
   `
 $uni-color-primary: #007aff;
@@ -100,7 +107,9 @@ $uni-font-size-subtitle: 36rpx
 $uni-color-paragraph: #3F536E // 文章段落颜色
 $uni-font-size-paragraph: 30rpx
 `
+
 module.exports = {
   SCSS,
-  SASS
+  SASS,
+  sassLoaderVersion
 }

packages/vue-cli-plugin-hbuilderx/build/css-loader.conf.js

+const fs = require('fs')
+const path = require('path')
+
 const {
-  // jsPreprocessOptions,
+  getPlatformScss,
+  getPlatformSass,
   nvueCssPreprocessOptions
-  // htmlPreprocessOptions
 } = require('@dcloudio/uni-cli-shared')
 
+const {
+  sassLoaderVersion
+} = require('@dcloudio/uni-cli-shared/lib/scss')
+
 const nvueStyleLoader = {
   loader: '@dcloudio/vue-cli-plugin-hbuilderx/packages/webpack-uni-nvue-loader/lib/style'
 }
@@ -17,19 +24,49 @@ const postcssLoader = {
   loader: 'postcss-loader',
   options: {
     sourceMap: false,
-    parser: require('postcss-comment'),
-    plugins: [
-      require('postcss-import'),
-      require('@dcloudio/vue-cli-plugin-uni/packages/postcss')
+    parser: require('postcss-comment'),
+    plugins: [
+      require('postcss-import'),
+      require('@dcloudio/vue-cli-plugin-uni/packages/postcss')
     ]
   }
 }
 
+// sass 全局变量
+const isSass = fs.existsSync(path.resolve(process.env.UNI_INPUT_DIR, 'uni.sass'))
+const isScss = fs.existsSync(path.resolve(process.env.UNI_INPUT_DIR, 'uni.scss'))
+let sassData = isSass ? getPlatformSass() : getPlatformScss()
+
+if (isSass) {
+  sassData = `@import "@/uni.sass"`
+} else if (isScss) {
+  sassData = `${sassData}
+  @import "@/uni.scss";`
+}
+
+const scssLoader = {
+  loader: 'sass-loader',
+  options: {
+    sourceMap: false
+  }
+}
+
 const sassLoader = {
   loader: 'sass-loader',
   options: {
-    sourceMap: false,
-    data: ''
+    sourceMap: false
+  }
+}
+
+if (sassLoaderVersion < 8) {
+  scssLoader.options.data = sassData
+  sassLoader.options.data = sassData
+  sassLoader.options.indentedSyntax = true
+} else {
+  scssLoader.options.prependData = sassData
+  sassLoader.options.prependData = sassData
+  sassLoader.options.sassOptions = {
+    indentedSyntax: true
   }
 }
 
@@ -48,11 +85,11 @@ const stylusLoader = {
   }
 }
 
-function createOneOf (preLoader) {
+function createOneOf (preLoader) {
   const use = [
     nvueStyleLoader,
     preprocessLoader
-  ]
+  ]
   use.push(postcssLoader)
   if (preLoader) {
     use.push(preLoader)
@@ -74,7 +111,7 @@ module.exports = [{
   oneOf: createOneOf()
 }, {
   test: /\.scss$/,
-  oneOf: createOneOf(sassLoader)
+  oneOf: createOneOf(scssLoader)
 }, {
   test: /\.sass$/,
   oneOf: createOneOf(sassLoader)

packages/vue-cli-plugin-hbuilderx/build/utils.js

-function resolve (module) {
-  try {
-    return require.resolve(module)
-  } catch (e) {}
-  return module
-}
-
-exports.cssLoaders = function (options) {
-  options = options || {}
-  const cssLoader = {
-    loader: resolve('css-loader'),
-    options: {
-      sourceMap: options.sourceMap
-    }
-  }
-
-  const postcssLoader = {
-    loader: resolve('postcss-loader'),
-    options: {
-      sourceMap: options.sourceMap
-    }
-  }
-
-  // generate loader string to be used with extract text plugin
-  const generateLoaders = (loader, loaderOptions) => {
-    let loaders = options.useVue ? [cssLoader] : []
-    if (options.usePostCSS) {
-      loaders.push(postcssLoader)
-    }
-    if (loader) {
-      loaders.push({
-        loader: resolve(loader + '-loader'),
-        options: Object.assign({}, loaderOptions, {
-          sourceMap: options.sourceMap
-        })
-      })
-    }
-    if (options.useVue) {
-      return [resolve('vue-style-loader')].concat(loaders)
-    } else {
-      return loaders
-    }
-  }
-
-  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
-  return {
-    less: generateLoaders('less'),
-    sass: generateLoaders('sass', {
-      indentedSyntax: true
-    }),
-    scss: generateLoaders('sass'),
-    stylus: generateLoaders('stylus'),
-    styl: generateLoaders('stylus')
-  }
-}
-
-// Generate loaders for standalone style files (outside of .vue)
-exports.styleLoaders = function (options) {
-  const output = []
-  const loaders = exports.cssLoaders(options)
-
-  for (const extension in loaders) {
-    const loader = loaders[extension]
-    output.push({
-      test: new RegExp('\\.' + extension + '$'),
-      use: loader
-    })
-  }
-
-  return output
-}

packages/vue-cli-plugin-uni/lib/chain-webpack.js

 const path = require('path')
 
+const {
+  sassLoaderVersion
+} = require('@dcloudio/uni-cli-shared/lib/scss')
+
 function resolve (dir) {
   return path.resolve(__dirname, '..', dir)
 }
@@ -10,7 +14,7 @@ module.exports = function chainWebpack (platformOptions) {
     cssPreprocessOptions
   } = require('@dcloudio/uni-cli-shared')
 
-  return function (webpackConfig) {
+  return function (webpackConfig) {
     // 处理静态资源 limit
     webpackConfig.module
       .rule('images')
@@ -59,6 +63,22 @@ module.exports = function chainWebpack (platformOptions) {
       })
     })
 
+    if (sassLoaderVersion >= 8) { // check indentedSyntax
+      // vue cli 3 and sass-loader 8
+      cssTypes.forEach(type => {
+        webpackConfig.module.rule('sass').oneOf(type).use('sass-loader').tap(options => {
+          if (options.indentedSyntax) {
+            if (!options.sassOptions) {
+              options.sassOptions = {}
+            }
+            options.sassOptions.indentedSyntax = true
+            delete options.indentedSyntax
+          }
+          return options
+        })
+      })
+    }
+
     platformOptions.chainWebpack(webpackConfig)
     // define
     webpackConfig
@@ -70,6 +90,6 @@ module.exports = function chainWebpack (platformOptions) {
     if (runByHBuilderX) { // 由 HBuilderX 运行时，移除进度，错误
       webpackConfig.plugins.delete('progress')
       webpackConfig.plugins.delete('friendly-errors')
-    }
+    }
   }
 }

packages/vue-cli-plugin-uni/lib/options.js

 const fs = require('fs')
 const path = require('path')
 
+const {
+  sassLoaderVersion
+} = require('@dcloudio/uni-cli-shared/lib/scss')
+
 module.exports = function initOptions (options) {
   const {
     getPlatformScss,
@@ -13,7 +17,7 @@ module.exports = function initOptions (options) {
 
   // 增加 src/node_modules 解析
   options.transpileDependencies.push(path.resolve(process.env.UNI_INPUT_DIR, 'node_modules'))
-  options.transpileDependencies.push('@dcloudio/uni-' + process.env.UNI_PLATFORM)
+  options.transpileDependencies.push('@dcloudio/uni-' + process.env.UNI_PLATFORM)
   options.transpileDependencies.push('@dcloudio/uni-stat')
 
   if (process.env.UNI_PLATFORM === 'app-plus') {
@@ -55,14 +59,17 @@ module.exports = function initOptions (options) {
   let sassData = isSass ? getPlatformSass() : getPlatformScss()
 
   if (isSass) {
-    sassData = `${sassData}
-  @import "@/uni.sass"`
+    sassData = `@import "@/uni.sass"`
   } else if (isScss) {
     sassData = `${sassData}
   @import "@/uni.scss";`
   }
 
-  options.css.loaderOptions.sass.data = sassData
+  if (sassLoaderVersion < 8) {
+    options.css.loaderOptions.sass.data = sassData
+  } else {
+    options.css.loaderOptions.sass.prependData = sassData
+  }
 
   let userPostcssConfigPath = path.resolve(process.env.UNI_INPUT_DIR, 'postcss.config.js')
   if (fs.existsSync(userPostcssConfigPath)) {