反应 - 样板+垫圈，使与webpack sass工作

我对JSLand和React很新。我有超过10年的Python和烧瓶，主要关注后端和非常少的HTML + JS，但零CSS。我在6周前开始了反应和js，并使用反应来制作简单的应用程序，这不需要太多样式。但是，现在我需要使用React使用扣眼进行造型，才能制作体面大小的项目。反应 - 样板+垫圈，使与webpack sass工作

我从反应样板1开始。在阅读react-boilerplate scss docs和//github.com/grommet/grommet-standalone自述文件后，我的理解是，我需要对webpack config进行更改才能使scss加载程序正常工作。

我ENV是win8.1 64，节点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',

通知附加！SASS装载机//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源代码在master分支//github.com/mxstbr/react-boilerplate/blob/master/internals/webpack/webpack.base.babel.js，+图4是因为加入4-线SCSS块]的

在同一个文件中resolve.extenstions阵列加入'.scss'。

现在，这些更改后，我运行NPM启动，以下行添加到app\containers\App\index.js现在，这些更改后，我运行NPM启动，并添加下面一行到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 resired位置。我可以ofcourse与扩展作为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

纠正this.Is有什么很明显的，我在这里失踪？它看起来好像scss加载程序不工作。任何方向都将非常有帮助。如果您已成功使用反应-样板索环，请发表您所做的更改。

PS：SO告诉我，我不能发布两个以上的链路，所以我修改了链接ommit HTTPS：从网址，请手动添加这些，遗憾的麻烦。

来源

2016-10-02 user2767799

要运行垫圈内置两种风格（主题），直到你想使用SCSS来定制它的造型，你将不需要安装SASS装载机或节点顶嘴。

正如你已经安装垫圈包包含的节点模块本身，你可以直接使用你的应用程序导入内部支持主题的精缩CSS。

要解决您的问题，您可以在下面输入只需添加到您index.js文件，这将给你一个默认的垫圈花式

import 'grommet/grommet.min.css';

这是一个精缩css文件，所以你不会需要处理SCSS来自护孔环的文件。这将作为一个简单的CSS文件。

除此之外，你还可以选择不同的垫圈可用的主题。缩小的CSS也可用于此。这里的CSS列表：

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

来源

2016-11-08 06:36:16

我有同样的问题，我的一个朋友帮我解决这个问题这样做：在你的“webpack.config.json”文件中添加从垫圈文档进行单机安装提取如下因素这一点，我是如下ws：

// 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";

现在垫圈青菜应该可用于整个项目，请注意，在这里你可以更改您的偏好的垫圈主题。

希望它能帮助，干杯！

来源

2017-06-13 17:37:06

反应 - 样板+垫圈，使与webpack sass工作

回答

相关问题