css - 为新的 Web 组件更新 UI Framework CSS

Question

我正在使用 Grommet 作为我的 React 页面的 UI 框架。对于 Grommet 未涵盖的 Web 组件(例如网络聊天控件)，为 Grommet CSS 未涵盖的其他 Web 组件设置样式的最简单方法是什么。我会添加自己的 custom.scss 吗？

    @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;
        }
    ...

}

在我的 app.js 文件中，我有以下导入调用...

import webachatcss from '../app/custom.scss';

然后在 render() 下我有以下代码

<Chat  classname='webchatcss' directLine=.... />

更新:我已经安装了 SASS-loader 并更新了我的 webpack.config.js，现在看起来像这样(规则部分是最新的更改)。

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: /\.scs$/, 
          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
  }
};

我的错误位置现在已经改变，错误现在出现在 scss 中(这似乎更近了一步)。但是我仍然收到错误消息“您可能需要一个合适的加载程序来处理此文件类型”

Answer 1

您可以将 css 文件导入您的代码并使用这些样式，或者您可以使用 React 创建样式。

import '/path/to/your/css/style.css';

// and on your component
<WebChat className="webchat" />

// or

const styles = {
    webchat: {
        fontSize: 14,
        color: '#303030'
    }
};

<WebChat style={ styles.webchat } />