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

Question

私はVue.js + Webpack + vue-loader + bootstrap-sass + sass-loaderを使い始めています。失われた

私がしたいのは、SPA Vue.jsコードでSASSバージョンのブートストラップを使用することです。私はこれをやりたいので、私のブートストラップのカスタマイズはSASSを使って行うことができます。ここに私がしたことがあります：

• vue-cliで新しいVue.js + webpackプロジェクトを作成しました。
• インストールされたブートストラップ・サスとローダーです。

• 追加された次/構築するための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 

なぜこれが機能しないのかわかりません。

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

Answer 1

あなたがあなたのwebpack.base.conf.jsのこのセクション内のローダーとして指定styleモジュール解決しようとしている：それは、あなたがCSSとSASSローダーを持っていることを考えると

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

をおそらく誤った入力をして自分自身を取り除くことができます。

Answer 2

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

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

このVueのコンポーネントのスタイルブロックのブートストラップ変数を利用可能にすることの追加ボーナスを持っています。また、{ test: /\.scss$/, loaders: [ 'style', 'css', 'sass' ] }をwebpacker.base.conf.jsから完全に削除しましたが、フォントを扱っているビットを保持しました。 .vueのローダーは既にsassを処理しています。

Answer 3

私はそれを働いたためにこのような正しい方法で管理：

ヴュ：

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

WebPACKのコンフィグローダー：私はbootstrap-sassではなく、デフォルトを使用

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

注意しboostrap