title: Invalid CSS after " ": expected 1 selector or at-rule, was "{"
body: <p>I am trying out Vue with SASS but I run into a problem ben using npm run build. I use webpack sass-loader. Can anyone help me out here? I suspect the problem is somewhere in my webpack config, but I can not find the problem.</p>
  
  <p>Error output:</p>
  
  <pre><code>ERROR in ./node_modules/css-loader?minimize!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-42a765dc","scoped":true,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?indentedSyntax!./node_modules/vue-loader/lib/selector.js?type=styles&amp;index=0!./src/components/Header.vue
  Module build failed: 
  &lt;template&gt;
  ^
        Invalid CSS after " ": expected 1 selector or at-rule, was "{"
        in /Users/rafrasenberg/webconexus/src/wcxwebsite/src/components/Header.vue (line 1, column 1)
   @ ./node_modules/vue-style-loader!./node_modules/css-loader?minimize!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-42a765dc","scoped":true,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?indentedSyntax!./node_modules/vue-loader/lib/selector.js?type=styles&amp;index=0!./src/components/Header.vue 4:14-355
   @ ./src/components/Header.vue
   @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&amp;index=0!./src/App.vue
   @ ./src/App.vue
   @ ./src/main.js
  </code></pre>
  
  <p>The header.vue file:</p>
  
  <pre><code>&lt;template&gt;
    &lt;header&gt;
      &lt;div id="logo"&gt;UA&lt;/div&gt;
      &lt;nav&gt;
        &lt;ul&gt;
          &lt;router-link tag='li' :to="{ name: 'home'}"&gt;
            &lt;a&gt;Home&lt;/a&gt;
          &lt;/router-link&gt;
          &lt;router-link tag='li' :to="{ name: 'cutecat'}"&gt;
            &lt;a&gt;CuteCat&lt;/a&gt;
          &lt;/router-link&gt;
        &lt;/ul&gt;
      &lt;/nav&gt;
    &lt;/header&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default{
    data () {
      return {
  }
    }
  }
  &lt;/script&gt;
  
  &lt;style scoped lang="sass"&gt;
    @import './../assets/styles/colors'
  header
      display: flex
      justify-content: space-around
      align-items: center
      background-color: $green
      border-bottom: 2px solid darken($green, 30%)
      color: $white
      div#logo
        font-size: 200%
        width: 33%
      nav
        flex-grow: 2
        ul
          padding: 0
          display: flex
          justify-content: space-around
          list-style: none
          a
            text-decoration: none
            color: $white
  &lt;/style&gt;
  </code></pre>
  
  <p>And now my webpack.config.js:</p>
  
  <pre><code>var path = require('path')
  var webpack = require('webpack')
  var BundleTracker = require('webpack-bundle-tracker')
  var WriteFilePlugin = require('write-file-webpack-plugin')
  
  module.exports = {
    entry: './src/main.js',
    output: {
      path: path.resolve(__dirname, './dist'),
      filename: 'bundle.js'
    },
    plugins: [
    new BundleTracker({filename: 'webpack-stats.json'}),
    new WriteFilePlugin()
    ],
    module: {
      rules: [
        {
          test: /\.scss$/,
             use: [
                 "style-loader", // creates style nodes from JS strings
                 "css-loader", // translates CSS into CommonJS
                 "sass-loader" // compiles Sass to CSS, using Node Sass by default
             ]
        },
        {
          test: /\.vue$/,
          loader: 'vue-loader',
        },
        {
          test: /\.js$/,
          loader: 'babel-loader',
          exclude: /node_modules/
        },
        {
          test: /\.(png|jpg|gif|svg)$/,
          loader: 'url-loader',
          options: {
            name: '[name].[ext]?[hash]'
          }
        }
      ]
    },
    resolve: {
      alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': path.resolve('src')
      },
      extensions: ['*', '.js', '.vue', '.json']
    },
    devServer: {
      historyApiFallback: true,
      noInfo: true,
      overlay: 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
      })
    ])
  }
  </code></pre>
  
  <p>My package.json with all my installed dependencies:</p>
  
  <pre><code>{
    "name": "wcxwebsite",
    "description": "A Vue.js project",
    "version": "1.0.0",
    "author": "webconexus &lt;raf@webconexus.nl&gt;",
    "license": "MIT",
    "private": true,
    "scripts": {
      "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
      "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
    },
    "dependencies": {
      "vue": "^2.5.11"
    },
    "browserslist": [
      "&gt; 1%",
      "last 2 versions",
      "not ie &lt;= 8"
    ],
    "devDependencies": {
      "babel-core": "^6.26.3",
      "babel-loader": "^7.1.5",
      "babel-preset-env": "^1.7.0",
      "babel-preset-stage-3": "^6.24.1",
      "cross-env": "^5.0.5",
      "css-loader": "^0.28.11",
      "file-loader": "^1.1.4",
      "node-sass": "^4.11.0",
      "sass-loader": "^6.0.7",
      "style-loader": "^0.23.1",
      "vue-loader": "^13.0.5",
      "vue-template-compiler": "^2.4.4",
      "webpack": "^3.12.0",
      "webpack-bundle-tracker": "^0.4.2-beta",
      "webpack-dev-server": "&gt;=3.1.11",
      "write-file-webpack-plugin": "^4.5.0"
    }
  }
  </code></pre>
  
  <p>Who can help me out?</p>