React-boilerplate+grommet，让 sass 和 webpack 一起工作

Question

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

我从 react-boilerplate1 开始。阅读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',

根据 //github.com/mxstbr/react-boilerplate/blob/master/docs/css/sass.md 注意额外的 !sass-loader

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

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

@第 40 行就在 css 块下方，并且

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 块添加了 4 行]

4. 在同一文件中将'.scss' 添加到resolve.extenstions 数组中。

5. 现在，在这些更改之后，我运行 npm start 并将以下行添加到 app\containers\App\index.jsNow 在这些更改之后，我运行 npm start 并将以下行添加到 app\containers\App\index.js

   import '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":

不用说已经安装了索环，并且文件存在于带有 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 加载程序不工作。如果您已成功使用带有 react-boilerplate 的垫圈，请发布您所做的更改。

PS：Stack Overflow 通知我不能发布两个以上的链接，所以我修改了链接以省略 https: 从 url，请手动添加。

Answer 1

在您的“webpack.config.json”文件中添加以下内容，这是从用于独立安装的索环文档中提取的，我的如下：

// Development rules
rules.push(
{
  test: /\.scss$/,
  exclude: /node_modules/,
  use: [
    {
      loader: 'style-loader'
    },
    {
      loader: 'css-loader'
    },
    {
      loader: 'sass-loader', options: {
        sourceMap:true,
        includePaths: ['./node_modules', './node_modules/grommet/node_modules']
      }
    }        
  ],
}
);

关注
转到您的主要 sass 文件。我的名为“app.scss”，位于主“scss”文件夹内，我有以下代码：

@import '~grommet/scss/aruba/index'; // or @import '~grommet/scss/vanilla/index'; any grommet theme
@import "base/normalize";
@import "base/breakpoints";
@import "base/app";

现在 grommet sass 应该可用于整个项目，请注意，您可以在此处更改您喜欢的 Grommet 主题。

Answer 2

要运行索环内置样式（主题），您无需安装 sass-loader 或 node-sass，直到您想使用 scss 自定义其样式。

由于您已经安装了 grommet 包，它在节点模块本身内包含受支持主题的缩小 css，您可以直接使用它来导入您的应用程序。

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

import 'grommet/grommet.min.css';

它是一个缩小的 css 文件，因此您不需要处理来自扣眼的 scss 文件。这将作为一个简单的 css 文件工作。

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

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