使用SCSS与全局Mixins交互CSS模块

Question

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

我已经将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";

现在，在引导网格中，我有了我想要在我的组件中使用的混合器。

所以在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中出现了一个错误

@()；^ No col名为make-col-配好

如何在全球范围内导入混合器和变量？

Answer 1

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