Sass Loading Failing on New Init

[joshbodine21]

If I use lang="sass" in my style tags in my App.vue, Sass fails to load when I npm run dev. This is the case on a completely new project and all the dependencies have been loaded.

ERROR in ./~/css-loader!./~/vue-loader/lib/style-rewriter.js?id=data-v-cad49406!./~/sass-loader/lib/loader.js?indentedSyntax!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue
Module build failed:
undefined
          ^
      Invalid CSS after "[v-cloak] {": expected "}", was "{"
      in C:\Work\WebProjects\WISCRM\web\src\App.vue (line 226, column 12)
 @ ./~/vue-style-loader!./~/css-loader!./~/vue-loader/lib/style-rewriter.js?id=data-v-cad49406!./~/sass-loader/lib/loader.js?indentedSyntax!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue 4:14-268 13:3-17:5 14:22-276
 @ ./src/App.vue
 @ ./src/app.js
 @ multi (webpack)-dev-server/client?http://localhost:8081 webpack/hot/dev-server ./src/app.js

My webpack.config.js is also the default configuration after initializing a new project. I cannot figure out what is going on?

var path = require('path')
var webpack = require('webpack')

module.exports = {
    entry: './src/app.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        publicPath: '/dist/',
        filename: 'build.js'
    },
    module: {
        rules: [{
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
                        // the "scss" and "sass" values for the lang attribute to the right configs here.
                        // other preprocessors should work out of the box, no loader config like this necessary.
                        'scss': 'vue-style-loader!css-loader!sass-loader',
                        'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
                    }
                    // other vue-loader options go here
                }
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]?[hash]'
                }
            }
        ]
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.common.js'
        }
    },
    devServer: {
        historyApiFallback: true,
        noInfo: true
    },
    performance: {
        hints: false
    },
    devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
    module.exports.devtool = '#source-map'
        // http://vue-loader.vuejs.org/en/workflow/production.html
    module.exports.plugins = (module.exports.plugins || []).concat([
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"production"'
            }
        }),
        new webpack.optimize.UglifyJsPlugin({
            sourceMap: true,
            compress: {
                warnings: false
            }
        }),
        new webpack.LoaderOptionsPlugin({
            minimize: true
        })
    ])
}

[Camzilla]

I also have this issue trying to run a clean project with Nuxt.js with node-sass and sass-loader installed..

[Camzilla]

@joshbodine21 I can confirm that my problem was due to that in my package.json file, both sass-loader and node-sass were listed under the devDependencies (acording to this guide https://nuxtjs.org/faq/pre-processors/#how-to-use-pre-processors-). Which is wrong, they need to be listed in the "Dependencies" to work..

[bennettrogers]

According to Evan in #174, lang="sass" expects the indented SASS syntax. Switch to lang="scss" and it should work - this fixed it for me.

I definitely keep node-sass and sass-loader in my devDependencies.

It's strange though, because in an older project (that was not initialized via vue-cli) I used lang="sass" with the bracket syntax and it worked fine. It's probably some difference in how I set up my webpack config vs how vue-cli sets it up, but I haven't dug in to find the difference.

[victorsilent]

I'm having the same problem. I create a totally new project add node-sass, sass-loader and when I add a source to my scss I get the exactly same error.
<style lang="scss" src="assets/scss/style.scss"></style>

@edit Solved
Adding this code on my webpack vue loaders solved the problem :)
scss: 'vue-style-loader!css-loader!sass-loader'

[yyx990803]

In vue-cli's webpack template:

• lang="sass" expects the indentedSyntax, i.e. .sass
• lang="scss" expects the CSS superset syntax, i.e. .scss.