14

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

私がやりたいのは、SPA Vue.js コードで SASS バージョンのブートストラップを使用することです。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 } }

  • 次の 1 行で src/style.scss を作成しました。@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 は CSS にコンパイルされてから main.js にインラインで組み込まれます。つまり、コンポーネント内の Bootstrap 変数にアクセスできなくなります。これを達成する方法はありますか？

4

3 に答える 3

15

私はこの問題を自分で解決することができました。を直接インポートする代わりに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>

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

于 2016-02-10T07:05:51.170 に答える
2

私は次のように正しい方法で作業することができました：

ビュー:

<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

于 2016-12-12T06:31:15.333 に答える