0

我正在尝试在我自己的应用程序中为其组件包含另一个库的 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]'
            }
          }
        ]
      },

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

4

2 回答 2

0

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

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>}>

我使用辣数据表库设置了一个代码框，并导入了样式，看起来它已应用。样式在“Hello.css”文件中，并在“index.js”中导入。

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

于 2018-06-04T20:34:06.933 回答
0

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

  1. 修改你的 Webpack 配置
module: {
    rules: [
        {
            test: /\.(css)$/,
            use: [
                'style-loader',
                {
                    loader: 'css-loader',
                    options: {
                        modules: false
                    }
                }
            ]
        },
        ...
    ]
}
  1. 将库 css 直接导入到您的 scss 样式表中（感谢this answer指出如何执行正确的.css导入）。确保.css从导入行中排除文件扩展名。:global指令将阻止 css-modules 修改该指令中所有样式的类名。
:global {
    @import "~library-module-name/.../CssFileWithoutExtension";
}
于 2020-08-05T08:02:10.530 回答