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?

Should not have a parentheses .test { @include make-col-ready; } to use scss properly eject your create react app, install dependencies sass loader, style loader and css loader then configure it in your webpack.config.js there are tutorials there on how to configure webpack. — user-9725874
– user-9725874, Commented Oct 23, 2018 at 12:51

Romasato · Accepted Answer · 2018-10-23 11:48:59Z

3

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

answered Oct 23, 2018 at 11:48

Romasato

3142 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React CSS Modules using SCSS With global Mixins

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related