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

Question

Tôi chỉ mới bắt đầu với Vue.js + Webpack + vue-loader + bootstrap-sass + sass-loader và tôi là một chút mất đi.

Điều tôi muốn làm là sử dụng phiên bản SASS của bootstrap với mã Vue.js SPA của tôi. Tôi muốn làm điều này để tùy chỉnh bootstrap của tôi có thể được thực hiện bằng cách sử dụng SASS. Dưới đây là những gì tôi đã thực hiện:

• Tạo dự án Vue.js + webpack mới với vue-cli.
• Đã cài đặt bộ nạp khởi động và bộ nạp sass.

• Added sau đây để xây dựng/webpack.base.conf.js:

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

• Created src/style.scss với một dòng: @import 'bootstrap';

• gia tăng dòng này lên đỉnh src/main.js: import './style.scss'

Khi tôi bây giờ chạy npm run dev tôi nhận được lỗi sau:

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 

Tôi không chắc tại sao tính năng này không hoạt động.

Ngoài ra, liên quan đến câu hỏi này, làm cách nào để tôi có quyền truy cập vào các biến Bootstrap SASS bên trong thành phần Vue của mình? Nếu tôi hiểu những gì đang xảy ra ở đây, SASS sẽ được biên dịch thành CSS trước khi được đưa vào nội tuyến trong main.js nghĩa là không có quyền truy cập vào bất kỳ biến Bootstrap nào trong các thành phần của tôi. Có cách nào để đạt được điều này?

Answer 1

Nó đang cố gắng để giải quyết style mô-đun mà bạn chỉ định như một bộ nạp trong phần này của webpack.base.conf.js của bạn:

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

Cho rằng bạn có một css và sass nạp, đó là có thể là một mục nhập sai lầm mà bạn có thể xóa để có được chính mình.

Answer 2

Tôi đã tự mình giải quyết vấn đề này. Thay vì cố gắng trực tiếp nhập khẩu style.scss, tôi đã xóa các tập tin hoàn toàn và tôi thay thế các yếu tố <style> của App.vue như sau:

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

này có thêm tiền thưởng làm biến Bootstrap sẵn trong khối theo phong cách của các thành phần Vue. Ngoài ra, tôi đã xóa { test: /\.scss$/, loaders: [ 'style', 'css', 'sass' ] } từ webpacker.base.conf.js hoàn toàn nhưng vẫn giữ bit xử lý phông chữ. Trình tải cho các tệp .vue đã được xử lý bằng sass.

Answer 3

tôi quản lý để làm việc đó một cách đúng đắn như thế này:

Vue:

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

webpack cấu hình bộ nạp:

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

Hãy lưu ý rằng tôi sử dụng bootstrap-sass và không phải là mặc định boostrap