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

Question

我剛剛開始使用Vue.js + Webpack + vue-loader + bootstrap-sass + sass-loader，我有點失落。

我想要做的是使用SASS版本的bootstrap和我的SPA Vue.js代碼。 我想這樣做，所以我的引導自定義可以使用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：@ import @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變量。 有沒有辦法實現這個目標？

Answer 1

我自己設法解決了這個問題。 我沒有嘗試直接導入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組件的樣式塊中提供Bootstrap變量的額外好處。 另外，我從webpacker.base.conf.js完全刪除了{ test: /\\.scss$/, loaders: [ 'style', 'css', 'sass' ] } ，但保留了處理字體的位。 .vue文件的加載程序已經處理了sass。

Answer 2

我設法以正確的方式工作：

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

Answer 3

它正在嘗試解析您在webpack.base.conf.js的此部分中指定為加載器的style模塊：

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

鑒於你有一個css和sass加載器，這可能是一個錯誤的條目，你可以刪除，讓自己去。