Bạn sẽ không thể nhập bất kỳ CSS nào vào tệp nhà cung cấp của mình bằng cách sử dụng ngăn xếp đó mà không thực hiện một số thay đổi.vendors file using that stack, without making some changes.
Tại sao? Vì dòng này:
import 'bootstrap/dist/css/bootstrap.css';
Nó chỉ nhập CSS của bạn dưới dạng chuỗi, trong khi thực tế những gì bạn muốn là nhà cung cấp CSS của bạn trong một thẻ kiểu. Nếu bạn kiểm tra config/webpack.commons.js
, bạn sẽ tìm thấy quy tắc này:
{
test: /\.css$/,
loaders: ['to-string-loader', 'css-loader']
},
Quy tắc này cho phép các thành phần của bạn nhập các tệp CSS, về cơ bản là:
@Component[{
selector: 'app',
encapsulation: ViewEncapsulation.None,
styleUrls: [
'./app.component.css' // this why you import css as string
],
Trong ứng dụng không có đóng gói, vì dòng này
{
test: /\.css$/,
loaders: ['to-string-loader', 'css-loader']
},
0 có nghĩa là bất kỳ quy tắc CSS nào sẽ được áp dụng trên toàn cầu cho ứng dụng của bạn. Vì vậy, bạn có thể nhập các kiểu Bootstrap trong thành phần ứng dụng của mình:@Component[{
selector: 'app',
encapsulation: ViewEncapsulation.None,
styleUrls: [
'./app.component.css',
'../../node_modules/bootstrap/dist/css/bootstrap.css'
],
Nhưng nếu bạn nhấn mạnh vào việc nhập vào
{
test: /\.css$/,
loaders: ['to-string-loader', 'css-loader']
},
1 của mình thì bạn sẽ cần cài đặt trình tải mới, {
test: /\.css$/,
loaders: ['to-string-loader', 'css-loader']
},
2 Điều này sẽ cho phép WebPack nhập CSS vào trang của bạn. Sau đó, bạn cần tạo một quy tắc cụ thể, trên webpack.common.js và thay đổi quy tắc hiện có: { //this rule will only be used for any vendors
test: /\.css$/,
loaders: ['style-loader', 'css-loader'],
include: [/node_modules/]
},
{
test: /\.css$/,
loaders: ['to-string-loader', 'css-loader'],
exclude: [/node_modules/] //add this line so we ignore css coming from node_modules
},
Quy tắc FIRS sẽ chỉ được áp dụng khi bạn cố gắng nhập CSS, từ bất kỳ gói nào bên trong
{
test: /\.css$/,
loaders: ['to-string-loader', 'css-loader']
},
3 Quy tắc thứ hai sẽ được áp dụng cho bất kỳ CS nào bạn nhập từ bên ngoài {
test: /\.css$/,
loaders: ['to-string-loader', 'css-loader']
},
3 Báo cáo lỗi
Lệnh [đánh dấu bằng {
test: /\.css$/,
loaders: ['to-string-loader', 'css-loader']
},
5]
{
test: /\.css$/,
loaders: ['to-string-loader', 'css-loader']
},
- Mới
- [x] xây dựng
- phục vụ
- kiểm tra
- E2E
- phát ra
- cộng
- cập nhật
- xơ vải
- Chiết xuất-I18n
- chạy
- Cấu hình
- Cứu giúp
- phiên bản
- Tài liệu
Đây có phải là một hồi quy?
Có, điều này đã hoạt động trong Angular 13.3.10 và trước đó, phiên bản trước mà lỗi này không có mặt là: ....Sự mô tả
Một mô tả rõ ràng và ngắn gọn về vấn đề ...Chúng tôi đang sử dụng các thành phần của bên thứ 3 Froala Editor và FullCalendar nơi chúng tôi nhập các tệp CSS trong mã nguồn như sau -
Trong trường hợp của Froala, chúng tôi làm như sau
import 'froala-editor/css/plugins/draggable.css';
import 'froala-editor/css/plugins/table.css';
Trong trường hợp FullCalendar, họ có thể đang làm trong thành phần của riêng mình và vấn đề sau đây đã được thêm vào repo - FullCalendar/FullCalendar#6869
fullcalendar/fullcalendar#6869
Khi chạy xây dựng ng, bạn sẽ nhận được lỗi xây dựng sau đây trông giống như sau -
./node_modules/@fullcalendar/common/main.css:4:0 - Error: Module parse failed: Unexpected token [4:0]
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See //webpack.js.org/concepts#loaders
Sinh sản tối thiểu
🔥 Ngoại lệ hoặc lỗi
Lỗi
./node_modules/@fullcalendar/common/main.css:4:0 - Error: Module parse failed: Unexpected token [4:0]
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See //webpack.js.org/concepts#loaders
./node_modules/froala-editor/css/plugins/table.css:7:0 - Error: Module parse failed: Unexpected token [7:0]
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See //webpack.js.org/concepts#loaders
🌍 Môi trường của bạn
Angular CLI: 14.0.0
Node: 18.2.0 [Unsupported]
Package Manager: npm 8.9.0
OS: darwin arm64
Angular: 14.0.0
... animations, cli, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic
... platform-server, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1400.0
@angular-devkit/build-angular 14.0.0
@angular-devkit/core 14.0.0
@angular-devkit/schematics 14.0.0
@angular/cdk 13.0.0
@schematics/angular 14.0.0
rxjs 7.5.5
typescript 4.6.2
Bất cứ điều gì khác có liên quan?
Tôi đang cố gắng nhập tệp CSS [s] trong tệp SCSS của thành phần thư viện.
Nhập là tiêu chuẩn thực sự:
{
test: /\.css$/,
loaders: ['to-string-loader', 'css-loader']
},
6Tuy nhiên, khi xây dựng thư viện [
{
test: /\.css$/,
loaders: ['to-string-loader', 'css-loader']
},
7] và sử dụng nó, phong cách không được áp dụng.Có điều gì tôi đang thiếu không?