Question

我正在使用aplha版本的create-react-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";

现在在bootstrap-grid中我有我想要在我的组件中使用的mixins。

所以在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的mixin

如何全局导入mixins和变量？

Answer 1

您可以使用https://github.com/shakacode/sass-resources-loader。找到了一个博客文章供您描述设置过程：React CSS Modules using SCSS With global Mixins

使用SCSS实现CSS模块使用全局Mixins

1 个答案: