Question

我正在尝试在我自己的应用程序中为其组件包含另一个库的css。作为参考，我正在尝试使用此数据表库：https://github.com/filipdanic/spicy-datatable。

在文档中，它指出了Out of the box, spicy-datatable is bare-bones. Include this CSS starter file in your project to get the look from the demo. Edit it to suit your needs.

我尝试在我自己的组件文件中导出我正在构建的组件顶部的样式表：import * as spicy from 'spicy-datatable/src/sample-styles.css';。它没有风格。我尝试将原始代码放入我的index.scss文件夹中的assets/styles文件中 - 不起作用。我尝试将它放在我自己的样式文件./component.scss中 - 没有用。

我现在将它们设置为：

import * as styles from './component.scss';
import * as spicy from 'spicy-datatable/src/sample-styles.css';

并且收到错误：

Module parse failed: Unexpected token (4:0) You may need an appropriate loader to handle this file type.

webpack.config.js

const dirNode = 'node_modules';
const dirApp = path.join(__dirname, 'client');
const dirAssets = path.join(__dirname, 'assets');

/**
 * Webpack Configuration
 */
module.exports = {
  entry: {
    vendor: ['lodash'],
    bundle: path.join(dirApp, 'index')
  },
  resolve: {
    modules: [dirNode, dirApp, dirAssets]
  },
  plugins: [],
  module: {
    rules: [
      // BABEL
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /(node_modules)/,
        options: {
          compact: true
        }
      },
      // CSS / SASS
      {
        test: /\.(scss)$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              modules: true,
              localIdentName: '[path]___[name]__[local]___[hash:base64:5]'
            }
          },
          'sass-loader'
        ]
      },

      // IMAGES
      {
        test: /\.(jpe?g|png|gif)$/,
        loader: 'file-loader',
        options: {
          name: '[path][name].[ext]'
        }
      }
    ]
  }
};

.babelrc

"plugins": [
    [
      "react-css-modules",
      {
        "filetypes": {
          ".scss": {
            "syntax": "postcss-scss"
          }
        },
        "webpackHotModuleReloading": true
      }
    ]

我不确定是否需要添加一些内容来专门处理.css文件，这是我第一次使用CSS模块。我认为react-css-modules就是这样做的，所以我不太清楚为什么CSS文件没有正确加载。

编辑：

编辑我的webpack以包含CSS：

  {
        test: /\.(css)$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true,
              localIdentName: '[path]___[name]__[local]___[hash:base64:5]'
            }
          }
        ]
      },

错误消失了，但样式仍然没有出现。

Answer 1

您可以尝试更改以下内容：

import * as spicy from 'spicy-datatable/src/sample-styles.css';

到

import from 'spicy-datatable/src/sample-styles.css';

如果您使用的是CSS模块，请尝试以下操作：

import spicy from 'spicy-datatable/src/sample-styles.css';

然后在JSX元素上使用样式，如下所示：

<h1 className={classes.<className in CSS here>}>

我设置了一个带有辣数据库的codesandbox，并导入了样式，看起来就像它应用的那样。样式位于“Hello.css”文件中，并在“index.js”中导入。

https://codesandbox.io/s/4j31xj3689

Answer 2

如果库不使用css-modules（使用className属性而不是styleName），则需要为导入的css禁用模块，因此类名将保持不变。这可以通过两种方式完成：

修改您的Webpack配置

module: {
    rules: [
        {
            test: /\.(css)$/,
            use: [
                'style-loader',
                {
                    loader: 'css-loader',
                    options: {
                        modules: false
                    }
                }
            ]
        },
        ...
    ]
}

将库CSS直接导入到您的scss样式表中（感谢this answer指出了如何执行正确的.css导入）。确保从导入行中排除.css文件扩展名。 :global指令将阻止CSS模块修改该指令中所有样式的类名。

:global {
    @import "~library-module-name/.../CssFileWithoutExtension";
}

使用Babel-Plugin-React-Css-Modules导入库样式表

2 个答案: