Sass với CSS Modules & Webpack

Question

Tôi đã xây dựng một dự án trong một thời gian bằng cách sử dụng các mô-đun Webpack, Sass và CSS. Thông thường trong .scss tác phẩm của tôi, tôi xác định một lớp học như:

:local(.button) { 
    color: white; 
} 

và Phản ứng linh kiện của tôi, trong phương pháp render, tôi yêu cầu các phong cách:

render =() => { 
    const styles = require('./MyStyles.scss'); 
    <div className={ styles.button } /> 
} 

và tất cả là tốt với thế giới. Mọi thứ hoạt động như mong đợi.

Bây giờ hôm nay tôi đã được đọc qua CSS Modules page và nhận thấy rằng không ai trong số các selectors được bao phủ bởi :local() như tôi và hơn nữa rằng họ đã nhập khẩu các phong cách như:

import styles from './MyStyles.scss'; 

Và tôi nghĩ "Wow trông nhiều đẹp hơn, nó dễ dàng hơn để xem nơi nó được nhập khẩu, vv. Và tôi rất muốn không sử dụng :local() và chỉ có những thứ địa phương theo mặc định. " Vì vậy, tôi đã thử điều đó và ngay lập tức gặp phải một số vấn đề.

1) `kiểu nhập từ './MyStyles.scss';

Bởi vì tôi đang sử dụng ESLint trên Phản ứng tác phẩm của tôi, tôi ngay lập tức nhận được một lỗi ném rằng MyStyles.scss không có xuất khẩu mặc định mà thông thường sẽ có ý nghĩa nhưng trang CSS Modules nói:

Khi nhập Mô-đun CSS từ một Mô-đun JS, nó xuất một đối tượng với tất cả các ánh xạ từ tên địa phương sang tên toàn cầu.

vì vậy, tôi tự nhiên dự kiến ​​việc xuất biểu định kiểu của biểu định kiểu cũng là đối tượng mà chúng đang đề cập.

2) Tôi cố gắng import { button } from './MyStyles.scss';

này pass linting nhưng button bản ghi như không xác định.

3) Nếu tôi hoàn nguyên về phương thức nhập require của mình, mọi thứ không được chỉ định với :local không được xác định.

Để tham khảo, bộ nạp webpack của tôi (Tôi cũng bao gồm Node-Neat và Node-Bourbon, hai thư viện tuyệt vời):

{ test: /.(scss|css)$/, loader: 'style!css?sourceMap&localIdentName=[local]___[hash:base64:5]!resolve-url!sass?outputStyle=expanded&sourceMap&includePaths[]=' + encodeURIComponent(require('node-bourbon').includePaths) + 
'&includePaths[]=' + encodeURIComponent(require('node-neat').includePaths[1]) + '&includePaths[]=' + path.resolve(__dirname, '..', 'src/client/') } 

Câu hỏi của tôi, sau tất cả những điều này, bao gồm:

1) Khi sử dụng Các Mô-đun CSS có Sass, tôi có bị hạn chế sử dụng hoặc :local hoặc :global không?

2) Vì tôi đang sử dụng webpack, điều đó cũng có nghĩa là tôi chỉ có thể require phong cách của mình?

Answer 1

Ngay sau khi đăng, tôi đã tìm ra giải pháp. Vấn đề mà tôi nghĩ khá khó hiểu, là trong cấu hình Webpack của tôi. Nguyên bộ nạp của tôi trông giống như:

loader: 'style!css?sourceMap&localIdentName=[local]___[hash:base64:5]!resolve-url!sass?outputStyle=expanded&sourceMap 

đó kích hoạt để tôi 1) require Sass của tôi và 2) quấn phong cách của tôi trong :local.

Tuy nhiên, bộ nạp css đã mất tích tùy chọn modules để nó trông giống như:

loader: 'style!css?modules&sourceMap&localIdentName=[local]___[hash:base64:5]!resolve-url!sass?outputStyle=expanded&sourceMap 

Bây giờ tôi có thể import phong cách của tôi và tôi không cần phải bọc chúng trong :local (mặc dù tôi đoán tôi vẫn nếu tôi muốn).

Điều tôi thấy thú vị nhất về tất cả điều này là không có tùy chọn modules, người dùng vẫn có thể sử dụng các tính năng CSS Modules-esque, mặc dù hơi hạn chế.

EDIT:

Something tôi nhận thấy, một cảnh báo trong tương lai để bất cứ ai nhìn vào câu trả lời này, là nếu bạn đang sử dụng eslint-plugin-import để lint nhập khẩu trong mã javascript của bạn, nó sẽ ném ra một lỗi khi nhập khẩu phong cách như :

import styles from './MyStyles.scss'; 

vì cách thức CSS Modules xuất đối tượng kiểu kết quả. Điều đó có nghĩa là bạn sẽ được yêu cầu làm require('./MyStyles.scss') để bỏ qua bất kỳ cảnh báo hoặc lỗi nào.