title: Webpack compilation issue with sass template in vue single file component
body: <p>I am upgrading to webpack-4 from webpack 2.
  It is breaking at places where my vue single file component has sass template in it.</p>
  
  <p>It seems like sass loader is not coming into picture when file extension is vue.</p>
  
  <p>I tried addidng sass as an extension in the webpack config, but it started treating vue files as sass files and compilation started breaking.</p>
  
  <p>This is the generated error.<br>
  All the files having error have sass template in vue SFC.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>ERROR in ./public/vue/applicationform/Academic.vue?vue&amp;type=style&amp;index=0&amp;lang=sass&amp; (./node_modules/vue-loader/lib??vue-loader-options!./public/vue/applicationform/Academic.vue?vue&amp;type=style&amp;index=0&amp;lang=sass&amp;) 51:0
  Module parse failed: Unexpected character '#' (51:0)
  You may need an appropriate loader to handle this file type.
  |
  |
  &gt; #situation
  |     font-family: 'Avenir', Helvetica, Arial, sans-serif
  |     -webkit-font-smoothing: antialiased
   @ ./public/vue/applicationform/Academic.vue?vue&amp;type=style&amp;index=0&amp;lang=sass&amp; 1:0-135 1:151-154 1:156-288 1:156-288
   @ ./public/vue/applicationform/Academic.vue
   @ ./node_modules/babel-loader/lib??ref--0!./node_modules/vue-loader/lib??vue-loader-options!./public/vue/applicationform/App.vue?vue&amp;type=script&amp;lang=js&amp;
   @ ./public/vue/applicationform/App.vue?vue&amp;type=script&amp;lang=js&amp;
   @ ./public/vue/applicationform/App.vue
   @ ./public/vue/applicationform.js
  
  ERROR in ./public/vue/applicationform/Workex.vue?vue&amp;type=style&amp;index=0&amp;lang=sass&amp; (./node_modules/vue-loader/lib??vue-loader-options!./public/vue/applicationform/Workex.vue?vue&amp;type=style&amp;index=0&amp;lang=sass&amp;) 715:0
  Module parse failed: Unexpected character '#' (715:0)
  You may need an appropriate loader to handle this file type.
  |
  |
  &gt; #situation
  |     font-family: 'Avenir', Helvetica, Arial, sans-serif
  |     -webkit-font-smoothing: antialiased
   @ ./public/vue/applicationform/Workex.vue?vue&amp;type=style&amp;index=0&amp;lang=sass&amp; 1:0-133 1:149-152 1:154-284 1:154-284
   @ ./public/vue/applicationform/Workex.vue
   @ ./node_modules/babel-loader/lib??ref--0!./node_modules/vue-loader/lib??vue-loader-options!./public/vue/applicationform/App.vue?vue&amp;type=script&amp;lang=js&amp;
   @ ./public/vue/applicationform/App.vue?vue&amp;type=script&amp;lang=js&amp;
   @ ./public/vue/applicationform/App.vue
   @ ./public/vue/applicationform.js
  
  ERROR in ./public/vue/applicationform/Kra.vue?vue&amp;type=style&amp;index=0&amp;lang=sass&amp; (./node_modules/vue-loader/lib??vue-loader-options!./public/vue/applicationform/Kra.vue?vue&amp;type=style&amp;index=0&amp;lang=sass&amp;) 73:0
  Module parse failed: Unexpected character '#' (73:0)
  You may need an appropriate loader to handle this file type.
  |
  |
  &gt; #situation
  |     font-family: 'Avenir', Helvetica, Arial, sans-serif
  |     -webkit-font-smoothing: antialiased
   @ ./public/vue/applicationform/Kra.vue?vue&amp;type=style&amp;index=0&amp;lang=sass&amp; 1:0-130 1:146-149 1:151-278 1:151-278
   @ ./public/vue/applicationform/Kra.vue
   @ ./node_modules/babel-loader/lib??ref--0!./node_modules/vue-loader/lib??vue-loader-options!./public/vue/applicationform/App.vue?vue&amp;type=script&amp;lang=js&amp;
   @ ./public/vue/applicationform/App.vue?vue&amp;type=script&amp;lang=js&amp;
   @ ./public/vue/applicationform/App.vue
   @ ./public/vue/applicationform.js
  
  ERROR in ./public/vue/applicationform/App.vue?vue&amp;type=style&amp;index=0&amp;lang=sass&amp; (./node_modules/vue-loader/lib??vue-loader-options!./public/vue/applicationform/App.vue?vue&amp;type=style&amp;index=0&amp;lang=sass&amp;) 1062:0
  Module parse failed: Unexpected token (1062:0)
  You may need an appropriate loader to handle this file type.
  |
  |
  &gt; .passive-day
  |     pointer-events: none;
  | #app
   @ ./public/vue/applicationform/App.vue?vue&amp;type=style&amp;index=0&amp;lang=sass&amp; 1:0-130 1:146-149 1:151-278 1:151-278
   @ ./public/vue/applicationform/App.vue
   @ ./public/vue/applicationform.js
  
  ERROR in ./public/vue/onboard/Onboard.vue?vue&amp;type=style&amp;index=0&amp;lang=sass&amp; (./node_modules/vue-loader/lib??vue-loader-options!./public/vue/onboard/Onboard.vue?vue&amp;type=style&amp;index=0&amp;lang=sass&amp;) 1065:0
  Module parse failed: Unexpected token (1065:0)
  You may need an appropriate loader to handle this file type.
  |
  |
  &gt; .cov-datepicker:hover
  |   border: 2px solid #d3d3d3 !important;
  | .cov-datepicker:focus
   @ ./public/vue/onboard/Onboard.vue?vue&amp;type=style&amp;index=0&amp;lang=sass&amp; 1:0-134 1:150-153 1:155-286 1:155-286
   @ ./public/vue/onboard/Onboard.vue
   @ ./public/vue/onboard.js
  
  ERROR in ./public/vue/reconboard/RecOnboard.vue?vue&amp;type=style&amp;index=1&amp;lang=sass&amp; (./node_modules/vue-loader/lib??vue-loader-options!./public/vue/reconboard/RecOnboard.vue?vue&amp;type=style&amp;index=1&amp;lang=sass&amp;) 1090:0
  Module parse failed: Unexpected token (1090:0)
  You may need an appropriate loader to handle this file type.
  |
  |
  &gt; .class1
  |   background-color: red;
  | .class2
   @ ./public/vue/reconboard/RecOnboard.vue?vue&amp;type=style&amp;index=1&amp;lang=sass&amp; 1:0-137 1:153-156 1:158-292 1:158-292
   @ ./public/vue/reconboard/RecOnboard.vue
   @ ./public/vue/reconboard.js
  
  ERROR in ./public/vue/console/Console.vue?vue&amp;type=style&amp;index=0&amp;lang=sass&amp; (./node_modules/vue-loader/lib??vue-loader-options!./public/vue/console/Console.vue?vue&amp;type=style&amp;index=0&amp;lang=sass&amp;) 1787:0
  Module parse failed: Unexpected token (1787:0)
  You may need an appropriate loader to handle this file type.
  |
  |
  &gt; .class1
  |     border: solid !important
  |     border-color: red !important
   @ ./public/vue/console/Console.vue?vue&amp;type=style&amp;index=0&amp;lang=sass&amp; 1:0-134 1:150-153 1:155-286 1:155-286
   @ ./public/vue/console/Console.vue
   @ ./public/vue/editp.js</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is my webpack configuration file</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>module.exports = {
    mode : process.env.NODE_ENV || 'development',
    context: __dirname + "/public/vue",
    
    entry: {kras: "./applicationform.js", edit: "./editp.js", reconboard: "./reconboard.js", jobpost: "./jobPost.js", register: "./register.js", 
        onboard: "./onboard.js", signin: "./signin.js", recdash : "./recDash.js", consent : "./consent.js", onboardconsent : "./onboardconsent.js",
        projectscreen: "./projectscreen.js" },
  
    plugins: [
     new CleanWebpackPlugin(['public/dist']),
     new VueLoaderPlugin(),
     new MiniCssExtractPlugin({
      filename: "[name].bundle.js",
      chunkFilename: "[name].[chunkhash].js"
     }),
    ],
      output: {
          path: __dirname + "/public/dist",
          filename: "[name].bundle.js",
    chunkFilename: "[name].[chunkhash].js"
      },
      module: {
       rules: [
         {
           test: /\.js$/,
           loader: 'babel-loader',
           exclude: /node_modules/,
           options: {
        plugins : ['lodash'],
          }
         },
         {
       test: /\.pug$/,
       oneOf: [
           {
         resourceQuery: /^\?vue/,
         use: ['pug-plain-loader']
        },
  
        {
         use: ['raw-loader', 'pug-plain-loader']
        }
       ],
           exclude: /node_modules/
       },
      
         {
           test: /\.(png|jpg|gif|svg)$/,
           loader: 'file-loader',
           options: {
             name: '[name].[ext]?[hash]'
           }
      },
      {
       test: /\.(scss|css)$/,
  
       oneOf: [
        {
         resourceQuery: /lang=sass/,
         use: [
         'vue-style-loader',
         'css-loader',
         'sass-loader',
         ]
        },
        {
         use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader'
         ]
        }
       ]
      },
      {
       test: /\.vue$/,
       loader : 'vue-loader',
       options : {
        loaders : {
          scss: 'vue-style-loader!css-loader!sass-loader',
          sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
        }
       }
         },
       ]
   },
   resolve: {
    alias: {
     'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['.js', '.jsx', '.css'],
    modules: [
     __dirname + '/public/vue',
     './node_modules'
    ]     
   },
    devServer: {
      historyApiFallback: true,
    contentBase: path.join(__dirname, 'public'),
      compress: true,
    port: 3000,
    disableHostCheck: true,
    hot: true
   },
   
   optimization: {
      splitChunks: {
        chunks: 'async',
        minSize: 30000,
        maxSize: 0,
        minChunks: 1,
        maxAsyncRequests: 5,
        maxInitialRequests: 3,
        automaticNameDelimiter: '~',
        name: true,
        cacheGroups: {
          vendors: {
            test: /[\\/]node_modules[\\/]/,
            priority: -10
          },
          default: {
            minChunks: 2,
            priority: -20,
            reuseExistingChunk: true
          }
        }
    },
    minimizer: [new UglifyJsPlugin()]
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is my vue code</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;template lang="pug"&gt;
      
      // My pug Code over her
      
  &lt;/template&gt;
  
  &lt;script&gt;
    // My script over here   
  &lt;/script&gt;
  
  &lt;style lang="sass"&gt;
      #app
          font-family: 'Avenir', Helvetica, Arial, sans-serif
          -webkit-font-smoothing: antialiased
          -moz-osx-font-smoothing: grayscale
          text-align: center
          color: #2c3e50
          margin-top: 60px
  
          h1, h2
              font-weight: normal
  
          ul
              list-style-type: none
              padding: 0
  
          li
              display: inline-block
              margin: 0 10px
  
          a
              color: #42b983
  
          .list-enter-active, .list-leave-active
              transition: all 1s
  
          .list-enter, .list-leave-to
              opacity: 0
              transform: translateY(30px)
  &lt;/style&gt;</code></pre>
  </div>
  </div>
  </p>