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

Posted 2023-02-21

技术标签:

【中文标题】React-boilerplate+grommet，让 sass 和 webpack 一起工作【英文标题】：React-boilerplate+grommet, making sass work with webpack 【发布时间】：2017-02-10 17:49:03 【问题描述】：

我在 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

这是我所做的更改。

同时安装了sass-loader 和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 注意额外的 !sass-loader

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

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

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

【问题讨论】：

【参考方案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 主题。

【讨论】：

【参考方案2】：

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

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

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