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

Я использую aplha-версию приложения create-response-app 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";

Теперь в bootstrap-grid у меня есть миксины, которые я хочу использовать в своих компонентах.

поэтому в 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

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


person Adam    schedule 25.04.2018    source источник
comment
Не должно быть скобок .test {@include make-col-ready; }, чтобы правильно использовать scss, извлеките ваше приложение create response, установите загрузчик зависимостей sass, загрузчик стилей и загрузчик css, затем настройте его в своем webpack.config.js, там есть руководства по настройке webpack.   -  person user-9725874    schedule 23.10.2018


Ответы (1)


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

person Romasato    schedule 23.10.2018