以文本形式导入和读取 CSS 文件的内容 (React/webpack)答案

【问题标题】：Import and read the contents of a CSS file as text (React/webpack)以文本形式导入和读取 CSS 文件的内容 (React/webpack)
【发布时间】：2019-01-23 08:16:25
【问题描述】：

我要做的是导入 css 文件，读取其内容，然后创建一个类名数组。

但是，下面会产生一个空对象的日志。

import TextCSS from './textfield.css'
console.log(TextCSS)

我一直在 NPM 中搜索可以做到这一点的包，Github 和 Google，尝试了一些名称很有希望的包，但到目前为止没有。

【问题讨论】：

您尝试过 fsread 吗？ w3schools.com/nodejs/nodejs_filesystem.asp

标签： javascript css reactjs

【解决方案1】：

试试this configuration

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['to-string-loader', 'css-loader'],
      },
    ],
  },
};

如果你有'css-loader'插件设置，看起来你也应该能够导入css文件然后调用字符串

const css = require('./test.css').toString();

【讨论】：

【解决方案2】：

如果你使用webpack，尝试使用https://www.npmjs.com/package/css-to-string-loaderloader

var styleString = require('css-to-string-loader!css-loader!./file.css');

【讨论】：

得到这个：意外的'！'在'css-to-string-loader！css-loader！./textfield.css'中。不要使用 import 语法来配置 webpack loader import/no-webpack-loader-syntax

【解决方案3】：

您可以在 React 中将 css 文件作为模块加载，但对我来说，它必须使用 mystyle.module.css nut 命名为 mystyle.css。然后就可以了

import styles from './mystyles.module.css'
console.log(styles)

更多关于 React CSS 模块的信息：https://facebook.github.io/create-react-app/docs/adding-a-css-modules-stylesheet 更多关于 CSS 模块的信息：https://css-tricks.com/css-modules-part-1-need/

【讨论】：