web-dev-qa-db-fra.com

Pourquoi ne puis-je pas compiler SASS avec Webpack?

J'ai les modules suivants dans ma configuration Webpack:

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 j'utilise sass-loader, et pour les fichiers * .scss je définis 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 VUE de vue.js) qui importe ce fichier scss:

<script>

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

(...)

</script>

Mais en quelque sorte, 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 se trompe-t-il le pipeline? (Il semble que le webpack essaie de traiter ['css', 'sass', 'style', 'css', 'sass'] au lieu de simplement ['style', 'css', 'sass'] tel que configuré dans les modules.

Qu'est-ce que je fais mal?

Merci!

EDIT: Lien vers le projet exemple complet: https://dl.dropboxusercontent.com/u/1066659/dummy.Zip =

webpackvue.jswebpack-dev-serverwebpack-style-loadersass-loader
25
PedroD

La raison pour laquelle cela se produit est que Vue génère automatiquement des configurations de chargeur pour CSS, SASS/SCSS, Stylus.

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

Vous voyez donc l'erreur parce que vous avez un chargeur de webpack qui essaie d'importer le fichier puis Vue essaie d'importer le fichier (déjà chargé). Vous pouvez donc penser à votre chargeur chaîne comme sass -> css -> style -> sass -> css -> vue-style

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

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

et juste compter sur le chargeur fourni.

Vous pouvez charger votre feuille de style de deux manières:

REMARQUE: vous DEVEZ utiliser scss au lieu de sass, car sass tentera d'analyser votre feuille de style en utilisant la syntaxe en retrait au lieu de la syntaxe du crochet.

1:

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

2:

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

Les deux importeront la feuille de style, cette dernière vous empêche simplement d'ajouter un style supplémentaire au composant.

32
Taylor Glaeser