search

Hướng dẫn angular import scss from assets - scss nhập góc cạnh từ nội dung

1 năms trước
Trả lời: 0
Lượt xem: 40

Tôi có một số tệp 

// home.component.scss
// depending on the solution, I imagine this needs to be updated
@import './src/assets/ap/scss/style';

// home.component.ts
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: [
      '../../assets/ap/bootstrap/css/bootstrap.min.css',
      './home.component.scss'
   ]
})
2 trong 
// home.component.scss
// depending on the solution, I imagine this needs to be updated
@import './src/assets/ap/scss/style';

// home.component.ts
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: [
      '../../assets/ap/bootstrap/css/bootstrap.min.css',
      './home.component.scss'
   ]
})
3:

Show
src/
..app/
..assets/
....ap/
......bootstrap/
......scss/
........variable.scss
........grid.scss
........responsive.scss
........style.scss

Trong 

// home.component.scss
// depending on the solution, I imagine this needs to be updated
@import './src/assets/ap/scss/style';

// home.component.ts
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: [
      '../../assets/ap/bootstrap/css/bootstrap.min.css',
      './home.component.scss'
   ]
})
4:

// depending on the solution, I imagine these need to be updated
@import 'src/assets/ap/scss/variable';
@import 'src/assets/ap/scss/grid';
@import 'src/assets/ap/scss/responsive';

Trong một trong những thành phần của tôi, tôi muốn nhập chúng như thế này:

// home.component.scss
// depending on the solution, I imagine this needs to be updated
@import './src/assets/ap/scss/style';

// home.component.ts
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: [
      '../../assets/ap/bootstrap/css/bootstrap.min.css',
      './home.component.scss'
   ]
})

Trong 

// home.component.scss
// depending on the solution, I imagine this needs to be updated
@import './src/assets/ap/scss/style';

// home.component.ts
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: [
      '../../assets/ap/bootstrap/css/bootstrap.min.css',
      './home.component.scss'
   ]
})
5:

"schematics": {
  "@schematics/angular:component": {
    "styleext": "scss"
  }
},

...

"assets": [
  "src/favicon.ico",
  "src/assets"
],
"styles": [
  "src/styles.scss"
],

Tất cả điều này biên soạn tốt, nhưng khi tôi tải trang của mình, các kiểu 

// home.component.scss
// depending on the solution, I imagine this needs to be updated
@import './src/assets/ap/scss/style';

// home.component.ts
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: [
      '../../assets/ap/bootstrap/css/bootstrap.min.css',
      './home.component.scss'
   ]
})
2 không có mặt. Có vẻ như thư mục 
// home.component.scss
// depending on the solution, I imagine this needs to be updated
@import './src/assets/ap/scss/style';

// home.component.ts
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: [
      '../../assets/ap/bootstrap/css/bootstrap.min.css',
      './home.component.scss'
   ]
})
7 không được liên kết đúng. Bất kỳ lời khuyên?

Trong một dự án góc điển hình, bạn sẽ có nhiều thành phần. Mỗi thành phần có biểu định kiểu riêng (CSS, SCSS, ít hơn, v.v.). Nó khá thường xuyên mà bạn có thể cần bao gồm các tệp kiểu dáng toàn cầu (đặc biệt là tệp biến) trong thành phần của bạn.

Chúng tôi đã nói về điều này một chút trong bài viết về kiểu góc khác của chúng tôi: Sử dụng Sass với Angular CLI

Hãy cùng khám phá một tùy chọn khác để nhập các tệp kiểu:

Một mẫu biến sass

Hãy nói rằng bạn có một 

// home.component.scss
// depending on the solution, I imagine this needs to be updated
@import './src/assets/ap/scss/style';

// home.component.ts
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: [
      '../../assets/ap/bootstrap/css/bootstrap.min.css',
      './home.component.scss'
   ]
})
8 trong thư mục 
// home.component.scss
// depending on the solution, I imagine this needs to be updated
@import './src/assets/ap/scss/style';

// home.component.ts
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: [
      '../../assets/ap/bootstrap/css/bootstrap.min.css',
      './home.component.scss'
   ]
})
9 của bạn:

// your folder structure
- src
	- app
		- app.component.ts
			- hello
				- hello.component.html
				- hello.component.scss
				- hello.component.ts
		- ...
	- stylings
		- _variables.scss

// your _variables.scss file
$brand-color: #800000;

Tham chiếu đến tệp biến

Dưới đây là tệp 

"schematics": {
  "@schematics/angular:component": {
    "styleext": "scss"
  }
},

...

"assets": [
  "src/favicon.ico",
  "src/assets"
],
"styles": [
  "src/styles.scss"
],
0 của chúng tôi, hãy để kiểu tiêu đề với 
"schematics": {
  "@schematics/angular:component": {
    "styleext": "scss"
  }
},

...

"assets": [
  "src/favicon.ico",
  "src/assets"
],
"styles": [
  "src/styles.scss"
],
1 của chúng tôi.

<!-- hello.component.html -->
<h2>
  Hello World!
</h2>

Biến 

"schematics": {
  "@schematics/angular:component": {
    "styleext": "scss"
  }
},

...

"assets": [
  "src/favicon.ico",
  "src/assets"
],
"styles": [
  "src/styles.scss"
],
2 có trong tệp 
"schematics": {
  "@schematics/angular:component": {
    "styleext": "scss"
  }
},

...

"assets": [
  "src/favicon.ico",
  "src/assets"
],
"styles": [
  "src/styles.scss"
],
3. Chúng ta cần nhập tệp để sử dụng nó:

// hello.component.scss
@import "../../../stylings/variables"; // this is not cool!

h2 {
    color: $brand-color;
}

Xem cú pháp 

"schematics": {
  "@schematics/angular:component": {
    "styleext": "scss"
  }
},

...

"assets": [
  "src/favicon.ico",
  "src/assets"
],
"styles": [
  "src/styles.scss"
],
4? Bạn có thích nó không?

Hãy tưởng tượng bạn cần lặp lại 

"schematics": {
  "@schematics/angular:component": {
    "styleext": "scss"
  }
},

...

"assets": [
  "src/favicon.ico",
  "src/assets"
],
"styles": [
  "src/styles.scss"
],
4 này trong một hàng chục hoặc hàng trăm thành phần khác và bạn cần nhớ đường dẫn tương đối. Nó không tuyệt. Hãy để sửa chữa điều này!

Lối tắt với cấu hình CLI góc

Nếu dự án của bạn được tạo bằng Angular CLI, bạn có thể thêm cấu hình 

"schematics": {
  "@schematics/angular:component": {
    "styleext": "scss"
  }
},

...

"assets": [
  "src/favicon.ico",
  "src/assets"
],
"styles": [
  "src/styles.scss"
],
6 trong tệp 
"schematics": {
  "@schematics/angular:component": {
    "styleext": "scss"
  }
},

...

"assets": [
  "src/favicon.ico",
  "src/assets"
],
"styles": [
  "src/styles.scss"
],
7. Cấu hình này cho phép bạn thêm các đường dẫn cơ sở bổ sung sẽ được kiểm tra nhập khẩu. Nó nói với Angular CLI tìm kiếm các tệp tạo kiểu trong các đường dẫn được đề cập trước khi xử lý từng tệp kiểu thành phần.

Ví dụ, trong trường hợp của chúng tôi, hãy để thêm 

"schematics": {
  "@schematics/angular:component": {
    "styleext": "scss"
  }
},

...

"assets": [
  "src/favicon.ico",
  "src/assets"
],
"styles": [
  "src/styles.scss"
],
8 trong các đường dẫn. Vì cấu hình chấp nhận một mảng, bạn có thể thêm nhiều đường dẫn.

{
	...
	"apps": [{
		"root": "src",
		...
		"stylePreprocessorOptions": {
			"includePaths": [
			  "./stylings"
			]
		}
		
	}]
}

Với điều này, chúng tôi có thể cập nhật 

"schematics": {
  "@schematics/angular:component": {
    "styleext": "scss"
  }
},

...

"assets": [
  "src/favicon.ico",
  "src/assets"
],
"styles": [
  "src/styles.scss"
],
9 của mình lên chỉ 
// your folder structure
- src
	- app
		- app.component.ts
			- hello
				- hello.component.html
				- hello.component.scss
				- hello.component.ts
		- ...
	- stylings
		- _variables.scss
0. Ngọt!

// hello.component.scss
@import "variables"; // change to just variables, say goodbye to ../../../stylings/

h2 {
    color: $brand-color;
}

Điều gì sẽ xảy ra nếu bạn có tên tệp trùng lặp trong các đường dẫn?

Hãy tưởng tượng bạn bao gồm hai đường dẫn kiểu trong 

"schematics": {
  "@schematics/angular:component": {
    "styleext": "scss"
  }
},

...

"assets": [
  "src/favicon.ico",
  "src/assets"
],
"styles": [
  "src/styles.scss"
],
7, cả hai đều có tệp 
// home.component.scss
// depending on the solution, I imagine this needs to be updated
@import './src/assets/ap/scss/style';

// home.component.ts
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: [
      '../../assets/ap/bootstrap/css/bootstrap.min.css',
      './home.component.scss'
   ]
})
8. Đoán xem điều gì sẽ xảy ra? CLI sẽ nhận được cả hai tệp hoặc ném lỗi?

Hãy cùng nhau thử nghiệm nó!

// depending on the solution, I imagine these need to be updated
@import 'src/assets/ap/scss/variable';
@import 'src/assets/ap/scss/grid';
@import 'src/assets/ap/scss/responsive';
0

Trong 

// your folder structure
- src
	- app
		- app.component.ts
			- hello
				- hello.component.html
				- hello.component.scss
				- hello.component.ts
		- ...
	- stylings
		- _variables.scss
3, bạn có các kiểu sau,

// depending on the solution, I imagine these need to be updated
@import 'src/assets/ap/scss/variable';
@import 'src/assets/ap/scss/grid';
@import 'src/assets/ap/scss/responsive';
1

Cập nhật cấu hình 

"schematics": {
  "@schematics/angular:component": {
    "styleext": "scss"
  }
},

...

"assets": [
  "src/favicon.ico",
  "src/assets"
],
"styles": [
  "src/styles.scss"
],
7 của bạn, bao gồm đường dẫn thư mục 
// your folder structure
- src
	- app
		- app.component.ts
			- hello
				- hello.component.html
				- hello.component.scss
				- hello.component.ts
		- ...
	- stylings
		- _variables.scss
5.

// depending on the solution, I imagine these need to be updated
@import 'src/assets/ap/scss/variable';
@import 'src/assets/ap/scss/grid';
@import 'src/assets/ap/scss/responsive';
2

Cập nhật tệp 

"schematics": {
  "@schematics/angular:component": {
    "styleext": "scss"
  }
},

...

"assets": [
  "src/favicon.ico",
  "src/assets"
],
"styles": [
  "src/styles.scss"
],
9 của bạn,

// depending on the solution, I imagine these need to be updated
@import 'src/assets/ap/scss/variable';
@import 'src/assets/ap/scss/grid';
@import 'src/assets/ap/scss/responsive';
3

Khởi động lại máy chủ dev của bạn. Đợi một lúc, và bạn nên mong đợi lỗi!

Hướng dẫn angular import scss from assets - scss nhập góc cạnh từ nội dung

Cho tôi biết tại sao!

Hóa ra, nếu có nhiều tệp có cùng tên, Angular CLI sẽ chỉ chọn tệp đầu tiên khớp với tên. Trong trường hợp này, nó sẽ chọn tệp 

"schematics": {
  "@schematics/angular:component": {
    "styleext": "scss"
  }
},

...

"assets": [
  "src/favicon.ico",
  "src/assets"
],
"styles": [
  "src/styles.scss"
],
3. Đó là lý do tại sao nó không thể có được biến 
// your folder structure
- src
	- app
		- app.component.ts
			- hello
				- hello.component.html
				- hello.component.scss
				- hello.component.ts
		- ...
	- stylings
		- _variables.scss
8, bởi vì nó trong tệp 
// your folder structure
- src
	- app
		- app.component.ts
			- hello
				- hello.component.html
				- hello.component.scss
				- hello.component.ts
		- ...
	- stylings
		- _variables.scss
9.

Nhưng tôi thực sự cần hai tập tin có cùng tên!

Vâng, có những trường hợp bạn có nhiều tệp có cùng tên và bạn thực sự cần nó, và bạn cũng muốn có các phím tắt. Cách giải quyết sẽ bao gồm cả con đường cha mẹ. Ví dụ, trong trường hợp của chúng tôi, cả hai thư mục 

// your _variables.scss file
$brand-color: #800000;
0 và 
// your _variables.scss file
$brand-color: #800000;
1 là 
// your _variables.scss file
$brand-color: #800000;
2.

Chúng tôi có thể cập nhật cấu hình 

"schematics": {
  "@schematics/angular:component": {
    "styleext": "scss"
  }
},

...

"assets": [
  "src/favicon.ico",
  "src/assets"
],
"styles": [
  "src/styles.scss"
],
7 thành các mục sau:

// depending on the solution, I imagine these need to be updated
@import 'src/assets/ap/scss/variable';
@import 'src/assets/ap/scss/grid';
@import 'src/assets/ap/scss/responsive';
4

Sau đó, trong 

"schematics": {
  "@schematics/angular:component": {
    "styleext": "scss"
  }
},

...

"assets": [
  "src/favicon.ico",
  "src/assets"
],
"styles": [
  "src/styles.scss"
],
9 của bạn, bạn có thể tham khảo cả hai tệp biến như sau,

// depending on the solution, I imagine these need to be updated
@import 'src/assets/ap/scss/variable';
@import 'src/assets/ap/scss/grid';
@import 'src/assets/ap/scss/responsive';
5

Chà, nó không hoàn hảo, nhiều từ hơn một chút để gõ, nhưng tốt hơn 

// your _variables.scss file
$brand-color: #800000;
5 phải không? Ngoài ra, có thể là kịch bản hiếm hoi mà bạn có nhiều tệp kiểu có cùng tên trong cùng một dự án, tôi đoán vậy?

Một cách giải quyết ngắn hơn khác sẽ bao gồm đường dẫn cha mẹ và một đường dẫn kiểu:

// depending on the solution, I imagine these need to be updated
@import 'src/assets/ap/scss/variable';
@import 'src/assets/ap/scss/grid';
@import 'src/assets/ap/scss/responsive';
6

Bạn có thể lưu một vài dòng trong 

"schematics": {
  "@schematics/angular:component": {
    "styleext": "scss"
  }
},

...

"assets": [
  "src/favicon.ico",
  "src/assets"
],
"styles": [
  "src/styles.scss"
],
9 của bạn.

// depending on the solution, I imagine these need to be updated
@import 'src/assets/ap/scss/variable';
@import 'src/assets/ap/scss/grid';
@import 'src/assets/ap/scss/responsive';
7

Điều gì về việc bao gồm các đường dẫn trong node_modules?

Cấu hình CLI Angular cũng có thể áp dụng cho các tệp trong 

// your _variables.scss file
$brand-color: #800000;
7. Hãy nói rằng bạn đang sử dụng gói NPM kiểu dáng tùy chỉnh của mình, ví dụ như mô -đun 
// your _variables.scss file
$brand-color: #800000;
8.

// depending on the solution, I imagine these need to be updated
@import 'src/assets/ap/scss/variable';
@import 'src/assets/ap/scss/grid';
@import 'src/assets/ap/scss/responsive';
8

Dưới đây là cấu trúc thư mục của bootstrap-sass:

// depending on the solution, I imagine these need to be updated
@import 'src/assets/ap/scss/variable';
@import 'src/assets/ap/scss/grid';
@import 'src/assets/ap/scss/responsive';
9

Hãy nói rằng bạn muốn sử dụng bootstrap từ 

// home.component.scss
// depending on the solution, I imagine this needs to be updated
@import './src/assets/ap/scss/style';

// home.component.ts
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: [
      '../../assets/ap/bootstrap/css/bootstrap.min.css',
      './home.component.scss'
   ]
})
8, bạn có thể cập nhật tệp 
"schematics": {
  "@schematics/angular:component": {
    "styleext": "scss"
  }
},

...

"assets": [
  "src/favicon.ico",
  "src/assets"
],
"styles": [
  "src/styles.scss"
],
7 của mình để bao gồm đường dẫn Bootstrap,

// home.component.scss
// depending on the solution, I imagine this needs to be updated
@import './src/assets/ap/scss/style';

// home.component.ts
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: [
      '../../assets/ap/bootstrap/css/bootstrap.min.css',
      './home.component.scss'
   ]
})
0

Sau đó, trong 

"schematics": {
  "@schematics/angular:component": {
    "styleext": "scss"
  }
},

...

"assets": [
  "src/favicon.ico",
  "src/assets"
],
"styles": [
  "src/styles.scss"
],
9 của bạn, bạn có thể tham khảo tệp biến bootstrap như sau,

// home.component.scss
// depending on the solution, I imagine this needs to be updated
@import './src/assets/ap/scss/style';

// home.component.ts
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: [
      '../../assets/ap/bootstrap/css/bootstrap.min.css',
      './home.component.scss'
   ]
})
1

Bản tóm tắt

Hãy để loại bỏ địa ngục đường dẫn tương đối (

// your _variables.scss file
$brand-color: #800000;
5) với cấu hình CLI góc hữu ích này!

Đó là nó. Mã hóa hạnh phúc!

Làm cách nào để thêm SCSS vào các thành phần góc?

Để bắt đầu mọi thứ:..
Tạo một thư mục trong thư mục dự án SRC của bạn có tên là Styles ..
Di chuyển phong cách của bạn. Tệp SCSS vào thư mục Kiểu mới được tạo ..
Cập nhật góc cạnh của bạn. Tệp JSON để trỏ đến vị trí mới của phong cách của bạn. Tệp SCSS ..

Tôi có thể sử dụng SCSS trong góc không?

Sử dụng SCSS (Bảng kiểu tuyệt vời về mặt cú pháp), việc tạo biến là tính năng hữu ích nhất của SCSS.Sử dụng các biến trong dự án Angular dựa trên SCSS của bạn giúp bạn xóa nhiều mã trùng lặp khỏi các bảng kiểu của bạn.Using variables in your SCSS based angular project helps you to remove a lot of duplicated code from your style sheets.

Tôi đặt phong cách tạo mẫu ở đâu?

Truy cập tệp angular.json, trong Styles Thêm đối tượng StylePreProcessorOptions với tùy chọn bao gồm và xác định tất cả các đường dẫn có sẵn trong một mảng với đường dẫn tệp của bạn, nó phải liên quan đến góc.json.angular. json file, under styles add stylePreprocessorOptions object with includePaths option and define all paths available in an array with your file paths, it should be relative to the angular. json.

Sự khác biệt giữa SCSS và SASS là gì?

SASS (Tờ phong cách tuyệt vời về mặt cú pháp) là ngôn ngữ kịch bản tiền xử lý sẽ được biên dịch hoặc giải thích thành CSS.SassScript là một ngôn ngữ kịch bản trong khi SCSS là cú pháp chính cho SASS được xây dựng trên đỉnh của cú pháp CSS hiện có.SassScript is itself a scripting language whereas SCSS is the main syntax for the SASS which builds on top of the existing CSS syntax.

programming css Angular import CSS Angular import shortcut Angular scss use Angular assets path Angular mixin scss

Bài Viết Liên Quan

Hướng dẫn where is schema in mongodb? - giản đồ ở đâu trong mongodb?
Hướng dẫn where is schema in mongodb? - giản đồ ở đâu trong mongodb?

Hướng dẫn how fetch data from database in php and display in bootstrap table? - cách tìm nạp dữ liệu từ cơ sở dữ liệu trong php và hiển thị trong bảng bootstrap?
Hướng dẫn how fetch data from database in php and display in bootstrap table? - cách tìm nạp dữ liệu từ cơ sở dữ liệu trong php và hiển thị trong bảng bootstrap?

Giám khảo miss universe 2023
Giám khảo miss universe 2023

Hướng dẫn copy one string to another in python - sao chép một chuỗi này sang chuỗi khác trong python
Hướng dẫn copy one string to another in python - sao chép một chuỗi này sang chuỗi khác trong python

Hướng dẫn self outside of class python - bản thân bên ngoài lớp học python
Hướng dẫn self outside of class python - bản thân bên ngoài lớp học python

Hướng dẫn right split python - trăn chia phải
Hướng dẫn right split python - trăn chia phải

Hướng dẫn dùng scipy python python
Hướng dẫn dùng scipy python python

Y nghia cd chuyen ve thu muc goc trong linux
Y nghia cd chuyen ve thu muc goc trong linux

Hướng dẫn why we use .encode in python? - tại sao chúng tôi sử dụng .encode trong python?
Hướng dẫn why we use .encode in python? - tại sao chúng tôi sử dụng .encode trong python?

Hướng dẫn is php executed on the client system? - php có được thực thi trên hệ thống khách hàng không?
Hướng dẫn is php executed on the client system? - php có được thực thi trên hệ thống khách hàng không?

MỚI CẬP NHẬP

Bể cá trong tiếng anh là gì năm 2024
2 phúts trước . bởi ShittyDiver
Lỗi error loading file the audio is not found năm 2024
30 phúts trước . bởi AttachedLodging
Thuốc giảm cân nào an toàn hiệu quả năm 2024
46 phúts trước . bởi BloomingAcceptance
Không thích trong tiếng hàn là gì năm 2024
46 phúts trước . bởi CoiledHeight
Nên chọn mua nồi chiên không dầu nào năm 2024
1 giờs trước . bởi DiligentCarrier
Núi phú sĩ tiếng nhật là gì năm 2024
1 giờs trước . bởi ExtravagantFreestyle
Bài tập đạo hàm logarit có lời giải năm 2024
1 giờs trước . bởi TrainedPosting
Nằm mơ có em bé là điềm gì năm 2024
1 giờs trước . bởi IrreverentBirthplace
Bài tập đọc cho học sinh lớp 3 năm 2024
2 giờs trước . bởi MingledDominance
Caâu chuyện về xin lỗi của nước nhật năm 2024
2 giờs trước . bởi UnifyingCustard

Xem Nhiều

Co số điện thoại di động nào 9 đó năm 2024
6 ngàys trước . bởi SilverTo-day
Himax premium lub ts40 là gì năm 2024
6 ngàys trước . bởi DeepeningMirth
81 2 nguyễn văn giai quận 1 f dakao năm 2024
6 ngàys trước . bởi First-rateMedics
Cách mạng công nghiệp 4.0 cơ hội nào cho startup năm 2024
4 ngàys trước . bởi SinfulBoldness
Các dạng toán chương 1 kinh tế vĩ mô năm 2024
2 ngàys trước . bởi HeathenPolling
Khắc phục lỗi phần mềm fot làm bị out game năm 2024
6 ngàys trước . bởi OvercastOutfield
Bài tập tự luận unit 12 tiếng anh 8 năm 2024
1 ngàys trước . bởi Ten-yearCross-examination
724 22 lê văn lương.phước kiểng nhà bè năm 2024
13 giờs trước . bởi AcousticEnthusiasm
Top phim xuyen khong hay nhat trung quoc năm 2024
5 ngàys trước . bởi BlissfulAbstinence
Backtory nghĩa là gì câu chuyện hậu trường năm 2024
2 ngàys trước . bởi RipplingProcessor

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội

Bản quyền © 2024 Inc.