fix: separate sass and scss - BREAKING CHANGE (#69)

BREAKING CHANGE
nuxt-modules · Aug 7, 2019 · 6b69f4d · 6b69f4d
1 parent becf6cb
commit 6b69f4d
Show file tree

Hide file tree

Showing 8 changed files with 3,131 additions and 2,662 deletions.
diff --git a/README.md b/README.md
@@ -36,7 +36,8 @@ export default {
 
   styleResources: {
    // your settings here
-   sass: [], // alternative: scss
+   sass: [],
+   scss: [],
    less: [],
    stylus: []
   }

diff --git a/lib/module.js b/lib/module.js
@@ -52,7 +52,7 @@ export default function nuxtStyledResources() {
   }
 
   if (sass.length) {
-    scss.push(...sass)
+    this.extendBuild(extendSass(sass))
   }
 
   if (scss.length) {
@@ -89,7 +89,8 @@ const extendWithSassResourcesLoader = matchRegex => resources => (config) => {
   })
 }
 
-const extendScss = extendWithSassResourcesLoader(/s[ac]ss/)
+const extendSass = extendWithSassResourcesLoader(/sass/)
+const extendScss = extendWithSassResourcesLoader(/scss/)
 const extendLess = extendWithSassResourcesLoader(/less/)
 
 module.exports.meta = require('../package.json')
diff --git a/test/fixture/sass/assets/a.sass b/test/fixture/sass/assets/a.sass
@@ -0,0 +1,2 @@
+h1
+    background-color: $white
diff --git a/test/fixture/sass/assets/nested/index.sass b/test/fixture/sass/assets/nested/index.sass
@@ -0,0 +1 @@
+$white: #fff
diff --git a/test/fixture/sass/components/Sass.vue b/test/fixture/sass/components/Sass.vue
@@ -10,3 +10,8 @@
     line-height: pow(4, 2);
   }
 </style>
+
+<style lang="sass">
+  .ymca
+    background-color: $white
+</style>
diff --git a/test/fixture/sass/nuxt.config.js b/test/fixture/sass/nuxt.config.js
@@ -3,12 +3,13 @@ const { resolve } = require('path')
 module.exports = {
   rootDir: resolve(__dirname, '../../../'),
   srcDir: resolve(__dirname),
-  css: ['@/assets/a.scss'],
+  css: ['@/assets/a.scss', '@/assets/a.sass'],
   render: {
     resourceHints: false
   },
   styleResources: {
-    scss: ['@/assets/nested/index.scss', 'mathsass']
+    scss: ['@/assets/nested/index.scss', 'mathsass'],
+    sass: ['@/assets/nested/index.sass']
   },
   modules: ['@@'],
   build: {

diff --git a/test/module.test.js b/test/module.test.js
@@ -35,6 +35,7 @@ describe('nuxt-style-resources', () => {
         const window = await (nuxt.server || nuxt).renderAndGetWindow(url('/'))
         const headHtml = window.document.head.innerHTML
         expect(headHtml).toContain('.ymca{color:#333;line-height:16')
+        expect(headHtml).toContain('.ymca{background-color:#fff')
       })
 
       afterEach(async () => {

diff --git a/yarn.lock b/yarn.lock