I've implemented Grommet as the UI Framework for my React page. However, I encountered a situation where certain web components, like a web chat control, are not covered by Grommet's CSS. What is the simplest way to style these additional web components that are not supported by Grommet? Would adding a custom.scss file be sufficient?
@import "includes/colors";
@import "includes/settings";
@import "includes/card-size";
webchat {
body .wc-app, .wc-app button, .wc-app input, .wc-app textarea {
font-family: 'Segoe UI', sans-serif;
font-size: 15px;
}
...
}
In my app.js file, I made the following import call...
import webachatcss from '../app/custom.scss';
Then under render(), this code is added:
<Chat classname='webchatcss' directLine=.... />
UPDATE: I have successfully installed the SASS-loader and updated my webpack.config.js which now includes the rules section as the latest change.
var path = require('path');
var webpack = require('webpack');
module.exports = {
context: path.join(__dirname, 'app'),
entry: ['./index.html','./app.js'],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /.js?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.html$/,
loader: "file-loader?name=[name].[ext]",
},
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
{
rules: [{
test: /\.scss$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "sass-loader"
}]
}]
},
{
test: /\.png$/,
loader: "url-loader?limit=100000"
},
{
test: /\.jpg$/,
loader: "file-loader"
}
],
},
resolve: {
alias: {
react: path.resolve('node_modules/react'),
},
},
devServer: {
historyApiFallback: true
}
};
The error location has shifted to the scss file (a step closer), but I am still encountering the error message "You may need an appropriate loader to handle this file type."