3

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

我从 react-boilerplate 1开始。在阅读了 react-boilerplate scss 文档和 //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

  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 行]

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

  2. 现在，在这些更改之后，我运行 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，请手动添加。

4

2 回答 2

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. 索环-hpe.min.css
  4. 索环-aruba.min.css
于 2016-11-08T06:36:16.887 回答
0

在您的“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 Theme。

于 2017-06-13T17:37:06.147 回答