web-dev-qa-db-fra.com

Vue.js + Webpack + vue-loader + bootstrap-sass + sass-loader

Je viens juste de commencer avec Vue.js + Webpack + vue-loader + bootstrap-sass + sass-loader et je suis un peu perdu. 

Ce que j'aimerais faire, c'est utiliser la version SASS de bootstrap avec mon code SPA Vue.js. Je veux faire cela afin que mes personnalisations de bootstrap puissent être faites en utilisant SASS. Voici ce que j'ai fait:

  • Création d'un nouveau projet Vue.js + webpack avec vue-cli.
  • Installé bootstrap-sass et sass-loader.

  • Ajout de ce qui suit pour construire/webpack.base.conf.js: 

    { test: /\.scss$/, loaders: [ 'style', 'css', 'sass' ] },
{ test: /\.(woff2?|ttf|eot|svg)$/, loader: 'url', query: { limit: 10000 } }

  • Créé src/style.scss avec une seule ligne: @import 'bootstrap';

  • Ajout de cette ligne en haut de src/main.js: import './style.scss'

Quand j'exécute maintenant npm run dev j'obtiens l'erreur suivante:

ERROR in ./src/main.js
Module not found: Error: Cannot resolve module 'style' in  Users/rstuart/Workspace/javascript/kapiche-demo/src
@ ./src/main.js 3:0-25

Je ne sais pas pourquoi cela ne fonctionne pas. 

De plus, en lien avec cette question, comment puis-je accéder aux variables Bootstrap SASS dans mes composants Vue? Si je comprends ce qui se passe ici, le SASS sera compilé en CSS avant d’être inclus en ligne dans main.js, ce qui signifie qu’il n’ya pas d’accès à aucune variable Bootstrap dans mes composants. Y a-t-il un moyen d'y parvenir?

javascripttwitter-bootstrapvue.jsbootstrap-sasssass-loader
14
rstuart85

J'ai réussi à résoudre ce problème moi-même. Au lieu d'essayer d'importer directement style.scss, j'ai entièrement supprimé le fichier et remplacé l'élément <style> de App.vue par le texte suivant:

  <style lang="sass">
    $icon-font-path: "../node_modules/bootstrap-sass/assets/fonts/bootstrap/";
    @import '../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap';

    .wrapper {
      margin-top: $navbar-height;
    }
  </style>

Cela présente l'avantage supplémentaire de rendre les variables Bootstrap disponibles dans le bloc de style des composants Vue. De plus, j’ai entièrement retiré { test: /\.scss$/, loaders: [ 'style', 'css', 'sass' ] } de webpacker.base.conf.js tout en maintenant le bit relatif aux polices. Le chargeur pour les fichiers .vue traite déjà avec sass.

15
rstuart85

J'ai réussi à travailler comme il se doit:

Vue:

<style lang="sass">
    $icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
    @import "~bootstrap-sass/assets/stylesheets/bootstrap";
</style>

chargeur de configuration webpack:

    {
      test: /\.(png|jpg|gif|svg)$/,
      loader: 'file-loader',
      options: {
        name: '[name].[ext]?[hash]'
      }
    },
    { 
      test: /\.scss$/, 
      loaders: [ 'style-loader', 'css-loader', 'sass-loader' ] 
    },
    { 
      test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
      loader: "url-loader?limit=10000&minetype=application/font-woff" 
    },
    { 
      test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
      loader: "file-loader" 
    }

Prenez note que j'utilise le bootstrap-sass et non la valeur par défaut boostrap

2
Cedric

Il essaie de résoudre le module style que vous avez spécifié en tant que chargeur dans cette section de votre webpack.base.conf.js:

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

Étant donné que vous avez un css et un sass loader, c'est probablement une entrée erronée que vous pouvez supprimer pour vous permettre de continuer.

0
Gabriel Isenberg