React CSS Modules 使用 SCSS 和全局 Mixins答案

【问题标题】：React CSS Modules using SCSS With global MixinsReact CSS Modules 使用 SCSS 和全局 Mixins
【发布时间】：2018-10-06 03:09:15
【问题描述】：

我正在使用 create-react-app https://github.com/facebook/create-react-app/issues/3815 的 aplha 版本

我已将 css 文件更改为 scss 并将它们重命名为 [filename].module.scss 所以它使用 css 模块。

在我的 index.module.scss 中，我包含全局样式，然后将其导入 index.js

-index.module.scss

:global(:root) {
   @import "./sass/site.scss";
 }

-index.js

import './index.module.scss';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';


ReactDOM.render(<App />, document.getElementById('root'));


serviceWorker.unregister();

在 site.scss 我有以下内容

@import "settings/all";

@import "../bootstrap/bootstrap-grid";

@import "tools/all";

@import "generic/generic.reset";

@import "elements/elements.headingspara";
@import "elements/elements.images";
@import "elements/elements.links";
@import "elements/elements.page";

现在在 bootstrap-grid 中，我有想要在整个组件中使用的 mixin。

所以在 app.module.scss 我有

.test {
  @include make-col-ready();
}

然后在 app.js 上导入

    import React, { Component } from 'react';
import style from './App.module.scss';

class App extends Component {
  render() {
    return (
      <div className="container">
        <div className="row">
          <div className={style.test}>
           Test
          </div>
      </div>
      </div>
    );
  }
}

export default App;

我在 app.modules.scss 中遇到错误

@include make-col-ready(); ^ 没有名为 make-col-ready 的 mixin

如何全局导入 mixins 和变量？

【问题讨论】：

不应有括号 .test { @include make-col-ready;要正确使用 scss 弹出您的创建反应应用程序，安装依赖项 sass 加载器、样式加载器和 css 加载器，然后在您的 webpack.config.js 中配置它，那里有关于如何配置 webpack 的教程。

标签： reactjs node-sass css-modules react-css-modules

【解决方案1】：

您可以为此使用https://github.com/shakacode/sass-resources-loader。为您找到了一篇描述设置过程的博文：React CSS Modules using SCSS With global Mixins

【讨论】：