fix(webpack): correct sass options for sass-loader@8 (nuxt#6460)

TheAlexLichter · pi0 · commit c202893b9e27 · 2019-09-26T14:10:54.000+02:00
diff --git a/package.json b/package.json
@@ -58,6 +58,7 @@
     "lerna": "^3.16.4",
     "lodash": "^4.17.15",
     "node-fetch": "^2.6.0",
+    "node-sass": "^4.12.0",
     "puppeteer-core": "^1.20.0",
     "request": "^2.88.0",
     "request-promise-native": "^1.0.7",
@@ -70,6 +71,7 @@
     "rollup-plugin-license": "^0.12.1",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-replace": "^2.2.0",
+    "sass-loader": "^8.0.0",
     "sort-package-json": "^1.22.1",
     "vue-jest": "^4.0.0-beta.2"
   }
diff --git a/packages/config/src/config/build.js b/packages/config/src/config/build.js
@@ -47,7 +47,9 @@ export default () => ({
     },
     less: {},
     sass: {
-      indentedSyntax: true
+      sassOptions: {
+        indentedSyntax: true
+      }
     },
     scss: {},
     stylus: {},
diff --git a/packages/config/test/__snapshots__/options.test.js.snap b/packages/config/test/__snapshots__/options.test.js.snap
@@ -82,7 +82,9 @@ Object {
       },
       "pugPlain": Object {},
       "sass": Object {
-        "indentedSyntax": true,
+        "sassOptions": Object {
+          "indentedSyntax": true,
+        },
         "sourceMap": false,
       },
       "scss": Object {
diff --git a/packages/config/test/config/__snapshots__/index.test.js.snap b/packages/config/test/config/__snapshots__/index.test.js.snap
@@ -64,7 +64,9 @@ Object {
       "less": Object {},
       "pugPlain": Object {},
       "sass": Object {
-        "indentedSyntax": true,
+        "sassOptions": Object {
+          "indentedSyntax": true,
+        },
       },
       "scss": Object {},
       "stylus": Object {},
@@ -412,7 +414,9 @@ Object {
       "less": Object {},
       "pugPlain": Object {},
       "sass": Object {
-        "indentedSyntax": true,
+        "sassOptions": Object {
+          "indentedSyntax": true,
+        },
       },
       "scss": Object {},
       "stylus": Object {},
diff --git a/packages/utils/src/cjs.js b/packages/utils/src/cjs.js
@@ -29,3 +29,14 @@ export function scanRequireTree (id, files = new Set()) {
 
   return files
 }
+
+export function tryRequire (id) {
+  try {
+    return require(id)
+  } catch (e) {
+  }
+}
+
+export function getPKG (id) {
+  return tryRequire(id + '/package.json')
+}
diff --git a/packages/webpack/package.json b/packages/webpack/package.json
@@ -35,6 +35,7 @@
     "postcss-loader": "^3.0.0",
     "postcss-preset-env": "^6.7.0",
     "postcss-url": "^8.0.0",
+    "semver": "^6.3.0",
     "std-env": "^2.2.1",
     "style-resources-loader": "^1.2.1",
     "terser-webpack-plugin": "^2.1.0",
diff --git a/packages/webpack/src/config/base.js b/packages/webpack/src/config/base.js
@@ -9,8 +9,9 @@ import HardSourcePlugin from 'hard-source-webpack-plugin'
 import TerserWebpackPlugin from 'terser-webpack-plugin'
 import WebpackBar from 'webpackbar'
 import env from 'std-env'
+import semver from 'semver'
 
-import { isUrl, urlJoin } from '@nuxt/utils'
+import { isUrl, urlJoin, getPKG } from '@nuxt/utils'
 
 import PerfLoader from '../utils/perf-loader'
 import StyleLoader from '../utils/style-loader'
@@ -51,7 +52,17 @@ export default class WebpackBaseConfig {
   }
 
   get loaders () {
-    return this.buildContext.buildOptions.loaders
+    if (!this._loaders) {
+      this._loaders = cloneDeep(this.buildContext.buildOptions.loaders)
+      // sass-loader<8 support (#6460)
+      const sassLoaderPKG = getPKG('sass-loader')
+      if (sassLoaderPKG && semver.lt(sassLoaderPKG.version, '8.0.0')) {
+        const { sass } = this._loaders
+        sass.indentedSyntax = sass.sassOptions.indentedSyntax
+        delete sass.sassOptions.indentedSyntax
+      }
+    }
+    return this._loaders
   }
 
   get modulesToTranspile () {
diff --git a/test/fixtures/with-config/assets/app.sass b/test/fixtures/with-config/assets/app.sass
@@ -0,0 +1,2 @@
+.sass-style
+  color: palevioletred
diff --git a/test/fixtures/with-config/nuxt.config.js b/test/fixtures/with-config/nuxt.config.js
@@ -90,7 +90,10 @@ export default {
       })
     }
   },
-  css: [{ src: '~/assets/app' }],
+  css: [
+    '~/assets/app.pcss',
+    '~/assets/app.sass'
+  ],
   render: {
     csp: true,
     http2: {
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+.sass-style`
	`2`	`+ color: palevioletred`