小编wei*_* du的帖子

我目前正在开发一个使用 DSM invision 进行 UI 设计的 react 项目，基本上，DSM 提供了一个包含样式变量的 css 文件“_style-params”。

--color-primary: #00a2ff;
--color-secondary: #6c757d;
--color-success: #28a745;
--color-danger: #dc3545;

由于这种易于理解和使用，我可以将 css 文件导入到我的主 css 文件中并编写：

background-color:var(--color-primary);

但是，说到字体，我有一些问题：以下来自 _style-params.css：

/* button fonts/default/5-warning font style */
--font-button-fonts-default-5-warning-font-size: 16px;
--font-button-fonts-default-5-warning-line-height: 14px;
--font-button-fonts-default-5-warning-text-align: center;
--font-button-fonts-default-5-warning-color: #f0ad4e;
--font-button-fonts-default-5-warning-letter-spacing: 0.2px;
--font-button-fonts-default-5-warning-font-style: normal;
--font-button-fonts-default-5-warning-font-weight: 400;
--font-button-fonts-default-5-warning-font-family: Roboto;

--font-button-fonts-default-5-warning: {
  font-size: var(--font-button-fonts-default-5-warning-font-size);
  line-height: var(--font-button-fonts-default-5-warning-line-height);
  text-align: var(--font-button-fonts-default-5-warning-text-align);
  color: var(--font-button-fonts-default-5-warning-color);
  letter-spacing: var(--font-button-fonts-default-5-warning-letter-spacing);
  font-style: var(--font-button-fonts-default-5-warning-font-style);
  font-weight: var(--font-button-fonts-default-5-warning-font-weight);
  font-family: var(--font-button-fonts-default-5-warning-font-family);
};

我可以只使用以下变量（这是一个对象）

var(--font-button-fonts-default-5-warning)

我不知道使用这个变量的属性，我尝试了以下操作：

font:var(--font-button-fonts-default-5-warning)

这不起作用（显然）。那么，我可以使用这个对象 CSS 变量吗？或者我必须使用单个变量？

我一直在使用webpack 4.6.0：

编译时出现以下问题：

Uncaught Error: Module parse failed: Unexpected token (1:4)
You may need an appropriate loader to handle this file type.
| div {
|     background-color: yellow;
|     color: red;

我的webpck配置如下：

var path = require('path');
var webpack = require('webpack');

module.exports = {
  mode:'development',
  entry: './src/code/app.js',
  output: { path: __dirname, filename: 'bundle.js'},
  watch: true,

  module: {
    rules: [
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          plugins: "transform-class-properties",
          presets: ['es2015', 'react']
        }
      },
      {
        // Do not transform vendor's …