Pourquoi ne suis-je pas en mesure de compiler SASS avec Webpack?

J'ai les modules suivants dans mon Webpack config:

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]')
        }
      }
    ]
  },

Vous pouvez voir que je suis en utilisant le sass-chargeur, et pour *.scss fichiers je suis la définition de ce pipeline: ['style', 'css', 'sass'].

Ensuite, j'ai mon fichier scss:

html {
  height: 100%;
}

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

(...)

Enfin j'ai ma page HTML (dans un fichier à partir de la VUE vue.js) qui importe qui scss fichier:

<script>

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

(...)

</script>

Mais de toute façon, j'obtiens cette erreur lors du lancement du projet:

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

Pourquoi est-il devenir le pipeline de mal? (Il semble webpack est d'essayer de traiter ['css', 'sass', 'style', 'css', 'sass'] au lieu de simplement ['style', 'css', 'sass'] comme configuré dans les modules.

Ce que je fais mal?

Merci!

EDIT: Lien vers l'exemple de projet: https://dl.dropboxusercontent.com/u/1066659/dummy.zip

  • require('./styles/main.scss') ne doit pas venir à l'intérieur <script> tag. au lieu de cela, il devrait être à l'intérieur de <style lang="sass"></style> utilisation de sass importation de la syntaxe.
  • Je compile maintenant sans montrer les erreurs. Cependant, le CSS n'est pas affiché dans la page qui s'affiche (c'est à dire n'est pas inclus dans le html).
  • J'ai ajouté un lien vers le projet.
InformationsquelleAutor PedroD | 2016-05-04
  1. 32

    La raison de ce qui se passe, c'est parce que Vue génère automatiquement le chargeur de configurations pour le CSS, SASS/SCSS, d'un Stylet.

    (Voir projectRoot/build/utils.js lignes de ~10 ~50)

    Si vous voyez l'erreur parce que vous avez un webpack chargeur qui est de tenter d'importer le fichier et puis la Vue est tentative d'importation de l' (déjà chargé) fichier. De sorte que vous pouvez penser à votre chargeur de chaîne sass -> css -> style -> sass -> css -> vue-style

    Afin de résoudre ce problème, vous devez vous débarrasser du chargeur que vous avez ajouté:

    {
  test: /\.scss$/,
  loaders: ['style', 'css', 'sass']
},

    et compter uniquement sur le chargeur.

    Vous pouvez charger votre feuille de style dans l'une des deux façons suivantes:

    REMARQUE: Vous DOIT utilisation scss au lieu de sass, comme sass tente d'analyser votre feuille de style en utilisant le retrait de la syntaxe à la place du support de la syntaxe.

    1:

    <style lang="scss">
  @import './styles/main.scss
</style>

    2:

    <style src="./styles/main.scss"></style>

    Ces deux importer la feuille de style, le deuxième a juste vous empêche d'ajouter des style pour le composant.

    • Rapide additif pour le dernier paragraphe: Vous pouvez utiliser plusieurs <style> les balises .vue de composant, ainsi tandis que vous ne pouvez pas ajouter de règles CSS à la balise avec le src attribut, vous pouvez ajouter une deuxième balise et de les mettre là.
    • Vous sauver ma journée!
    • Que faire si je veux importer scss fichier dans le fichier JS?
    InformationsquelleAutor Taylor Glaeser