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

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

Ce que je voudrais faire est d'utiliser la SASS version de bootstrap avec mon SPA Vue.js code. Je veux faire cela, donc mon bootstrap personnalisation peut être effectuée à l'aide de SASS. Voici ce que j'ai fait:

  • Créé un nouveau Vue.js + webpack projet avec vue-cli.
  • Installé bootstrap et sass sass-loader.
  • Ajouté ce qui suit à build/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é cette ligne vers le haut de src/main.js: import './style.scss'

Quand j'ai 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 suis pas sûr de savoir pourquoi cela ne fonctionne pas.

Aussi, liée à cette question, comment puis-je accéder à Bootstrap SASS variables à l'intérieur de ma Vue? Si je comprends bien ce qui se passe ici, le SASS sera compilé en CSS avant d'être incluse incluse dans main.js il n'y a pas d'accès à toute Bootstrap variables dans mes composants. Est-il un moyen pour y parvenir?

source d'informationauteur rstuart85 | 2016-02-10

  1. 15

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

      <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 a l'avantage supplémentaire de rendre Bootstrap variables disponibles dans le bloc de style de Vue des composants. Aussi, j'ai enlevé { test: /\.scss$/, loaders: [ 'style', 'css', 'sass' ] } de webpacker.base.conf.js entièrement mais en gardant un peu de traiter avec les polices. Le chargeur pour .vue fichiers traite déjà avec sass.

  2. 2

    J'ai réussi à travaillé le droit chemin comme ceci:

    Vue:

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

    webpack config du chargeur:

        {
      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" 
    }

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

  3. 0

    C'est en essayant de résoudre le style module que vous avez spécifié comme un chargeur dans cette section de votre webpack.base.conf.js:

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

    Étant donné que vous avez un css et sass chargeur, qui est probablement une entrée erronée que vous pouvez retirer pour essayer vous-même.