Vue-loader: Problem configuring `scss` lang for stylesheets

[ShayDavidson]

I'm trying to define a "custom" lang for scss, so it'll use the sass-loader for <style lang='scss'>, but can't manage to make it work.

This is the vue section in my webpack.config:

module.exports = {
    ...
    vue: {
        loaders: {
            scss: 'sass'
    }
}

And this is the error:

ERROR in ./~/sass-loader!./~/vue-loader/lib/style-rewriter.js!./~/vue-loader/lib/selector.js?type=style&index=0!./src/vue/app.vue
Module build failed: TypeError: undefined is not a function
    at Object.module.exports (/Users/sdavidson/Development/bring/node_modules/sass-loader/index.js:211:17)

Am I missing adding pipes to the scss loader?

[aidistan]

Consider to use followings instead

vue: {
  loaders: {
    scss: 'style!css!sass'
  }
}

[octref]

Just in case people come to this thread, this works for me in the current version:

vue: {
  loaders: {
    'scss': 'vue-style!css!sass'
  }
}

Versions:

├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

[fsaenger]

Looks like Webpack 2 changed the structure of its config.

You now have to use this:

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue',
        options: {
        // vue-loader options
          loaders: {
            scss: 'style!css!sass'
          }
        }
      },
      // ...
    ]
  }
  // ...
}

[Beatusvir]

@fsaenger I'm trying your suggestion but I get this error:

Module not found: Error: Can't resolve 'style'

My project is based on this https://github.com/vuejs/vue-hackernews-2.0

This is the relevant webpack config, maybe there is something weird going on here

 module: {
    noParse: /es6-promise\.js$/, // avoid webpack shimming process
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueConfig
      },
      {
        test: /\.js$/,
        loader: 'buble-loader',
        exclude: /node_modules/,
        options: {
          objectAssign: 'Object.assign'
        }
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  }

So I added that option in the vueConfig file, which looks like

module.exports = {
  postcss: [
    require('autoprefixer')({
      browsers: ['last 3 versions']
    })
  ],
  loaders: {
    scss: 'style!css!sass'
  }
}

[chanonroy]

@Beatusvir

loaders: {
    scss: 'style-loader!css-loader!sass-loader'
}

The code above ended up working for me. Seems like it needs the exact spelling of the loaders to resolve.

[Beatusvir]

@chanonroy
Trying this right away, updating answer asap

[chanonroy]

Also - make sure you have style-loader, css-loader, sass-loader, and node-sass saved in your package.json's devDependencies.

[Beatusvir]

Yes it worked! had to install style-loader as you mentioned, weird since it was previously there and didnt see an error before.

Thanks @chanonroy

[chanonroy]

<3 @Beatusvir

[cj]

I'm still getting this error TypeError: undefined is not a function when using lang='scss'.

      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          postcss: [
            require('autoprefixer')({
              browsers: ['last 3 versions']
            })
          ],
          loaders: {
            scss: 'style-loader!css-loader!sass-loader'
          }
        }
      },

[Beatusvir]

That doesn't look like the error we were getting. Sounds like JavaScript error to me.