web-dev-qa-db-ja.com

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

私はVue.js + Webpack + vue-loader + bootstrap-sass + sass-loaderを使い始めたばかりで、少し迷っています。

私がしたいことは、bootstrapのSASSバージョンをSPA Vue.jsコードで使用することです。これを実行して、bootstrapのカスタマイズでSASSを使用して実行します。

  • Vue-cliを使用して新しいVue.js + webpackプロジェクトを作成しました。
  • インストールされたbootstrap-sassおよびsass-loader。

  • 以下をbuild/webpack.base.conf.jsに追加しました：

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

  • Src/style.scssを1行で作成：@import 'bootstrap';

  • 次の行をsrc/main.jsの先頭に追加しました：import './style.scss'

今実行するとnpm run dev次のエラーが発生します。

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

これが機能しない理由はわかりません。

また、この質問に関連して、Bootstrapコンポーネント内のSASS変数にアクセスするにはどうすればよいですか？Vueコンポーネント？ここで何が起こっているのか理解している場合、SASS main.jsにインラインで含まれる前にCSSにコンパイルされます。つまり、コンポーネント内のBootstrap変数にはアクセスできません。これを達成する方法はありますか？

javascripttwitter-bootstrapvue.jsbootstrap-sasssass-loader
14
rstuart85

私はこの問題を自分で解決することができました。 style.scssを直接インポートする代わりに、ファイルを完全に削除し、<style>のApp.vue要素を次のように置き換えました。

  <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>

これには、Bootstrap変数をVueコンポーネントのスタイルブロックで使用できるようにする変数が追加されています。また、{ test: /\.scss$/, loaders: [ 'style', 'css', 'sass' ] }をwebpacker.base.conf.jsから完全に削除しましたが、フォント。.vueファイルのローダーはすでにsassを扱っています。

15
rstuart85

私はなんとかこのように正しく動作しました：

Vue：

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

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

bootstrap-sassであり、デフォルトではありませんboostrap

2
Cedric

Webpack.base.conf.jsのこのセクションでローダーとして指定したstyleモジュールを解決しようとしています：

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

Cssとsassローダーがあるとすると、それはおそらくあなたが自分自身を動かすために削除することができる誤ったエントリーです。

0
Gabriel Isenberg