Question

我在应用sass样式时遇到麻烦。

我在components库中定义了组件。这些组件导入sass样式。消费型应用程序会导入组件，我们可以渲染组件，但不使用sass样式。

例如，在这种情况下，将不应用Button.scss中的样式，而会应用App.scss中的样式。

// /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的webpack使用样式加载器，css加载器，postcss加载器和sass加载器。 components仅使用css-loader，postcss-loader和sass-loader。

我的直觉是，当another-app从Button导入components时，它将使用样式加载器来抓取Button.scss并将其添加为<style/>就像在App.scss中一样。

未导入组件模块中的Sass

0 个答案: