Реагирование CSS-модулей с использованием SCSS с глобальными миксинами - PullRequest
Новая
       49

Реагирование CSS-модулей с использованием SCSS с глобальными миксинами

0 голосов
/ 25 апреля 2018

Я использую aplha-версию create-реагировать-приложение https://github.com/facebook/create-react-app/issues/3815

Я изменил файлы CSS на scss и переименовал их [имя файла] .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

@ include make-col-ready ();^ Нет миксина с именем make-col-ready

Как импортировать миксины и переменные по всему миру?

1 Ответ

0 голосов
/ 23 октября 2018

Для этого вы можете использовать https://github.com/shakacode/sass-resources-loader.Нашел для вас сообщение в блоге, описывающее процесс установки: Реагирование CSS-модулей с использованием SCSS с глобальными миксинами

...