Asked Jul 23rd, 2:47 PM 66 0 2
  • 66 0 2
0

Có ai rành về postcss-modules giúp mình với!

Share
  • 66 0 2

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 đỡ 😃

source https://github.com/moorthy-g/css-module-for-raw-html

2 ANSWERS


Answered Jul 28th, 6:36 AM
+1

Vì nếu bạn import như thế này, nó sẽ hiểu là module maininternal. 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.

Share
Answered Jul 25th, 6:51 AM
-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 😂

Share