reactjs - React-boilerplate+grommet，使 sass 与 webpack 一起工作

Question

我在 Python 和 Flask 方面有超过 10 年的经验，主要关注后端，很少使用 HTML + JavaScript，但 CSS 为零。大约 6 周前，我开始使用 React 和 JavaScript，并使用 React 制作了不需要太多样式的简单应用程序。但是，现在我需要使用 React 来制作一个相当大的项目，并使用索环进行样式设置。

我从 react 样板开始 1 。看完react-boilerplate scss docs和//github.com/grommet/grommet-standalone 自述文件，我的理解是，我需要更改 webpack 配置才能使 scss 加载器正常工作。

我的环境是win8.1 x64，节点6.4.0

这是我所做的更改。

1. 安装了 sass-loader 和 node-sass

2. 在 internals\webpack\webpack.dev.babel.js 中已更改

cssLoaders: 'style-loader!css-loader?localIdentName=[local]__[path][name]__[hash:base64:5]&modules&importLoaders=1&sourceMap!postcss-loader',

至

cssLoaders: 'style-loader!css-loader?localIdentName=[local]__[path][name]__[hash:base64:5]&modules&importLoaders=1&sourceMap!postcss-loader!sass-loader',

注意附加的!sass-loader，按照//github.com/mxstbr/react-boilerplate/blob/master/docs/css/sass.md

将以下内容添加到 internals\webpack\webpack.base.babel.js

{ test:/\.scss$/, loader: 'style!css!sass?outputStyle=compressed' }

@ CSS block 下方的第 40 行，以及

sassLoader: {
  includePaths: [
    './node_modules',
    // this is required only for NPM < 3.
    // Dependencies are flat in NPM 3+ so pointing to
    // the internal grommet/node_modules folder is not needed
    './node_modules/grommet/node_modules'
  ]
}

@line 62[第58行，如果您正在master分支中查找@ github源代码//github.com/mxstbr/react-boilerplate/blob/master/internals/webpack/webpack.base.babel.js, +4是因为为 scss block 添加了 4 行]

在同一个文件中，在 resolve.extenstions 数组中添加了 '.scss'。

现在，在这些更改之后，我运行 npm start 并将以下行添加到 app\containers\App\index.js现在，在这些更改之后，我运行 npm start 并将以下行添加到应用程序\容器\应用程序\index.js

导入'grommet/scss/vanilla/index';

根据此处的文档//github.com/grommet/grommet-standalone

在 cmd.exe 控制台中出现以下错误

ERROR in ./app/containers/App/index.js
Module not found: Error: Can't resolve 'grommet/scss/vanilla/index' in 'C:\Users\coder\frontend\app\containers\App'
 @ ./app/containers/App/index.js 57:0-36
 @ ./app/app.js
 @ multi main
Child html-webpack-plugin for "index.html":

不用说，grommet 已安装，并且文件存在于具有 scss 扩展的所需位置。我当然可以使用扩展名导入 import 'grommet/scss/vanilla/index.scss 然后我收到以下错误

ERROR in ./~/css-loader!./~/style-loader!./~/css-loader!./~/sass-loader?outputStyle=compressed!./~/grommet/scss/vanilla/index.scss Module build failed: Unknown word (5:1)

  3 | // load the styles   4 | var content = require("!!./../../../css-loader/index.js!./../../../sass-loader/index.js?outputStyle=compressed!./index.scss");
> 5 | if(typeof content === 'string') content = [[module.id, content, '']];
    | ^   6 | // add the styles to the DOM   7 | var update = require("!./../../../style-loader/addStyles.js")(content, {});   8 | if(content.locals) module.exports = content.locals;

 @ ./~/grommet/scss/vanilla/index.scss 4:14-189 13:2-17:4 14:20-195

我在这里缺少一些非常明显的东西吗？看起来好像 scss 加载器不起作用。如果您已成功将grommet与react-boilerplate结合使用，请发布您所做的更改。

PS:Stack Overflow 通知我不能发布两个以上的链接，因此我修改了链接以在网址中省略 https:，请手动添加。

Answer 1

要运行 Grommet 内置样式(主题)，您无需安装 sass-loader 或 node-sass，除非您想使用 scss 自定义其样式。

当您安装了grommet包时，它包含节点模块本身内部支持的主题的缩小CSS，您可以直接使用它导入到您的应用程序中。

要解决您的问题，您只需将以下导入添加到您的index.js 文件中，这将为您提供默认的索环样式

import 'grommet/grommet.min.css';

它是一个缩小的 css 文件，因此您无需处理索环中的 scss 文件。这将作为一个简单的 css 文件使用。

除此之外，您还可以从索环中选择不同的可用主题。缩小的 css 也适用于此。以下是这些 css 的列表:

1. grommet.min.css
2. grommet-hpinc.min.css
3. grommet-hpe.min.css
4. grommet-aruba.min.css