Ich habe die folgenden Module in meiner Webpack-Konfiguration:

module: {
    preLoaders: [
      {
        test: /\.vue$/,
        loader: 'eslint',
        include: projectRoot,
        exclude: /node_modules/
      },
      {
        test: /\.js$/,
        loader: 'eslint',
        include: projectRoot,
        exclude: /node_modules/
      }
    ],
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue'
      },
      {
        test: /\.js$/,
        loader: 'babel',
        include: projectRoot,
        exclude: /node_modules/
      },
      {
        test: /\.json$/,
        loader: 'json'
      },
      {
        test: /\.html$/,
        loader: 'vue-html'
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url',
        query: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.scss$/,
        loaders: ['style', 'css', 'sass']
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url',
        query: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  },

Sie können sehen, dass ich sass-loader verwende, und für * .scss-Dateien definiere ich diese Pipeline:['style', 'css', 'sass'].

Dann habe ich meine scss-Datei:

html {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

(...)

Endlich habe ich meine HTML-Seite (in einer VUE-Datei aus vue.js), die diese scss-Datei importiert:

<script>

require('./styles/main.scss')

(...)

</script>

Aber irgendwie bekomme ich diesen Fehler beim Starten des Projekts:

ERROR in ./~/css-loader!./~/sass-loader!./~/style-loader!./~/css-loader!./~/sass-loader!./src/styles/main.scss
Module build failed:
html {
^
      Invalid CSS after "...load the styles": expected 1 selector or at-rule, was "var content = requi"
      in /Users/td/uprank/src/styles/main.scss (line 1, column 1)
 @ ./src/styles/main.scss 4:14-247 13:2-17:4 14:20-253

Warum stimmt die Pipeline nicht? (Es scheint, dass das Webpack versucht, @ zu verarbeite['css', 'sass', 'style', 'css', 'sass'] statt nur['style', 'css', 'sass'] wie in Modulen konfiguriert.

Was mache ich falsch

Vielen Dank

BEARBEITEN Link zum vollständigen Beispielprojekt:https: //dl.dropboxusercontent.com/u/1066659/dummy.zi