Cách sử dụng đường dẫn tuyệt đối để nhập scss tùy chỉnh, khi sử dụng phản ứng + webpack?

Question

Bên trong một tệp tin scss, tôi đang cố gắng nhập một đoạn scss tùy chỉnh, được sử dụng rộng rãi (trong một ngăn xếp React/SASS/Webpack).

Để tôi có thể sử dụng mixin được chia sẻ.

Giả sử tôi đang tạo MyAdminButton và tôi muốn nhập tệp scss có liên quan đến tất cả các nút của dự án. (Đó là scss tùy chỉnh, không phải nhà cung cấp/bên ngoài).

Nó sẽ trông như thế này:

//this actually works but it is a code smell : what if the current file moves ? 
@import "../../stylesheets/_common-btn-styles.scss"; 

.my-admin-btn { 
    // here I can use a shared mixin defined in _common-btn-styles.scss 
} 

này nghe có vẻ không tốt vì nếu tập tin SCSS tôi di chuyển, sau đó mọi thứ đều bị phá vỡ.

Cảm ơn sự giúp đỡ của bạn

Answer 1

Tìm thấy. Trên thực tế bạn có thể cấu hình sass-loader trong webpack.config.json, như mô tả ở đây: https://github.com/jtangelder/sass-loader

Dưới đây là phần có liên quan:

sassLoader: { 
    includePaths: [path.resolve(__dirname, "./some-folder")] 
}