Question

我是JSLand和React的新手。我在Python和flask中有超过10年的exp，主要关注后端和非常少的HTML + JS，但是没有CSS。大约6周前，我开始使用react和js，使用react做了简单的应用程序，不需要太多样式。但是，现在我需要用React做一个合适的大小项目，使用索环进行样式化。

我开始使用react-boilerplate 1。阅读react-boilerplate scss docs和//github.com/grommet/grommet-standalone自述文件之后，我的理解是，我需要更改webpack配置以使scss加载器正常工作。

我的env是win8.1 x64，节点6.4.0

这是我改变的。

同时安装了sass-loader＆amp; node-sass
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

在internals\webpack\webpack.base.babel.js
中添加了以下内容
{ test: /\.scss$/, loader: 'style!css!sass?outputStyle=compressed' }

位于css区块下方的@ 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行如果你在主分支中查找@ github源//github.com/mxstbr/react-boilerplate/blob/master/internals/webpack/webpack.base.babel.js,+4是因为为scss块添加了4行]

在'.scss'数组中添加resolve.extenstions的同一文件中。
现在经过这些更改后我运行npm start并将以下行添加到app\containers\App\index.js现在，在这些更改之后我运行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 extesion的已启用位置。我可以导入扩展名为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

我已经用完了我的google fu技能来纠正这个问题。我在这里找到了一些非常明显的东西吗？看起来好像scss加载器不工作。任何指示都会非常有帮助。如果您已成功使用带有反应样板的索环，请发布您所做的更改。

PS：SO告诉我我不能发布两个以上的链接，所以我修改了链接以省略https：来自网址，请手动添加，对不起麻烦。

Answer 1

要运行索引内置样式（主题），在使用scss自定义样式之前，不需要安装sass-loader或node-sass。

当你安装了grommet软件包时，它包含了节点模块本身内支持的主题的缩小css，你可以直接在你的应用程序中导入它。

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

import 'grommet/grommet.min.css';

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

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

grommet.min.css
grommet-hpinc.min.css
护环hpe.min.css
护环aruba.min.css

Answer 2

我遇到了同样的问题，我的一位朋友帮我解决了这个问题：在你的＆＃34; webpack.config.json＆＃34;文件添加下面这是从用于Standalone安装的grommet doc中提取的，我的如下：

// 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文件。我叫做＃34; app.scss＆＃34;并且位于主要＆＃34; scss＆＃34;我里面的文件夹有以下代码：

@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主题。

希望它有所帮助，干杯！

react-boilerplate + grommet，使用webpack工作

2 个答案: