前端新手請問 要怎麼引入bootstrap 才能在scss裡使用 @include media-breakpoint-down(sm) {...}

General
1

版本是 Angular: 9.0.0-rc.7

一開始我先在 angular.json 的styles 引入並重新 ng serve

但在 .component.scss 裡寫 @include media-breakpoint-down(md) {…}
就跑出

ERROR in ./src/app/views/login/login.component.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined mixin.
╷
5 │ ┌ @include media-breakpoint-down(md) {
6 │ │ width: 100%;
7 │ └ }

直接在style.scss 裡引入後也是一樣

不知道一般是怎麼用bootstrap寫RWD的呢

剛剛測試把
@import ‘~bootstrap/scss/functions’;
@import ‘~bootstrap/scss/variables’;
@import ‘~bootstrap/scss/mixins’;

直接引入在要使用 @include media-breakpoint-down 的.scss就可以

但是這樣每個scss都要引入
不知道有沒有只需要引入一次的方法呢?

2

這個問題你應該要先去了解scss的編譯模式，才能知道你可以怎麼去改
如果你要只引用一次，那就是要讓component的scss檔案要先被include到一個檔案中，這樣編譯的時候他才會正確的引用到那些變數
不然的話，就必須要每個檔案都各自引用