反應 - 樣板+墊圈，使與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工作

回答

相關問題