React CSS Modules using SCSS With global Mixins

Question

I'm using the aplha version of create-react-app https://github.com/facebook/create-react-app/issues/3815

i've changed the css files to scss and renamed them [filename].module.scss so it uses css modules.

In my index.module.scss i am including global styles and this is then imported on the 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();

Inside site.scss i have the following

@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";

Now in bootstrap-grid i have mixins that i want to use through out my components.

so in app.module.scss i have

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

Which is then imported on the 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;

i'm getting an error in app.modules.scss

@include make-col-ready(); ^ No mixin named make-col-ready

How do i import mixins and variables globally?

Answer 1

You can use https://github.com/shakacode/sass-resources-loader for this. Found a blog post for you describing the setup process: React CSS Modules using SCSS With global Mixins