У меня проблемы с применением sass-стилей.
У меня есть компоненты, определенные в библиотеке components
.Эти компоненты импортируют стиль sass.Приложение-потребитель импортирует компоненты, и мы можем отобразить компоненты, но стили sass не применяются.
Например, в этом случае стили из Button.scss
не применяются, а из App.scss
are.
// /components/Button/Button.scss
.my-button {
color: red;
}
// /components/Button/Button.js
import * as React from 'react';
import './Button.scss';
export const Button = ({ children }) => <button className='my-button'>{children}</button>
// /another-app/App/App.js
import * as React from 'react';
import { Button } from 'components';
import './App.scss';
export const App = () => <div><Button>Hello World</Button></div>
Я проверил сборку, выданную webpack, на наличие компонентов.Он правильно разрешает переменные sass и добавляет строку css.В веб-пакете another-app
используются style-loader, css-loader, postcss-loader и sass-loader.components
использует только css-loader, postcss-loader и sass-loader.
Моя интуиция заключается в том, что когда another-app
импортирует Button
из components
, он будет использовать style-loader для захватаButton.scss
и добавьте это как <style/>
в DOM, как это делает для App.scss
.