0
Có ai rành về postcss-modules giúp mình với!
index.js mình thì như vầy
import 'main.scss';
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width" />
<title>CSS module - Raw HTML</title>
</head>
<body css-module="internal.bg">
<div css-module="main.container">
<h2 css-module="main.title">Title for the page</h2>
</div>
</body>
</html>
main.scss
@import "internal.scss";
body {
background: #fafafa;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
nếu làm như vậy thì thằng
css-module="internal.bg"
hoạt động không đúng
nếu index.js mình sửa lại như vầy thì ok
import 'main.scss';
import 'internal.scss';
phát sinh vấn đề là mình không sử dụng được variables khai báo trong main.scss cho internal.scss và ngược lại anh em giúp đỡ
Thêm một bình luận
2 CÂU TRẢ LỜI
+1
Vì nếu bạn import như thế này, nó sẽ hiểu là module main
và internal
. 2 modules khác nhau.
import 'main.scss';
import 'internal.scss';
Còn nếu bạn import internal trong main.scss
và chỉ import main.scss
trong js file, lúc này nó chỉ hiểu bạn import 1 module main
thôi.
Cho nên khi sử dụng phải là như vậy mới đúng:
css-module="main.bg"
Bạn thử lại xem sao nhé.
Have a nice day.
-1
Bạn có thể viết 1 file scss định nghĩa các variables ở trong file đó. Ở file scss nào cần sử dụng variables thì bạn có thể import vào phải đó và sử dụng thôi