87

我目前正在使用带有 React 的 CSS 模块作为我的样式。因此,我的每个组件都在其组件特定的 css 文件中导入,如下所示:

import React from 'react';
import styles from './App.css';

const example = () => (
  <div className={styles.content}>
    Hello World!
  </div>
);

export default example;

这在为单个组件设置样式时效果很好,但是如何应用不是特定于组件的全局样式(html、正文、标题标签、div 等)?

4

7 回答 7

150

由于您使用的是 ES6 导入语法,因此您可以使用相同的语法来导入样式表

import './App.css'

此外,您可以将您的类包装:global为切换到全局范围(这意味着 CSS 模块不会修改它,例如:在它旁边添加一个随机 id)

:global(.myclass) {
  background-color: red;
}
于 2016-10-16T00:03:25.503 回答
7

这可以通过简单地添加:

require('./App.css');

(感谢@elmeister 正确回答了这个问题。)

于 2016-10-06T18:39:58.537 回答
6

我遇到了同样的问题,找到了以下方法来解决这个问题,你可以选择最适合你的

  1. 在 webpack 配置中定义两组用于解析 css/less 文件的规则。
    • 第一条规则应该是包含所有全局样式,假设它保存在 /styles/ 或类似目录中。
    • 第二条规则是处理所有局部范围的 css 样式,理想情况下,这些样式应位于其组件旁边。
    • 您可以在定义规则时使用包含和排除选项来执行此操作
    • 或者通过强制执行命名约定并相应地编写规则,例如所有 css 模块都将是[name].module.css并且您的测试将检查/.module.(less|css)$/并解析它。

下面给出一个示例:

      // exclude all global styles for css modules
      {
        test: /\.(less|css)$/,
        exclude: path.resolve(__dirname, './src/styles'),
        use: [
          {
            loader: CssExtractPlugin.loader,
            options: { hot: is_dev, reloadAll: is_dev }
          },
          {
            loader: "css-loader",
            options: { 
                modules: { 
                    localIdentName: '[local]___[hash:base64:5]'
                }
            }
          },
          "postcss-loader",
          "less-loader"
        ]
      },
      // process global styles without css modules
     {
        test: /\.(less|css)$/,
        include: path.resolve(__dirname, './src/styles'),
        use: [
          {
            loader: CssExtractPlugin.loader,
            options: { hot: is_dev, reloadAll: is_dev }
          },
          "css-loader",
          "postcss-loader",
          "less-loader"
        ]
      }
  1. 在编写 css/less 时使用:local 和 :global 。如果启用 css 模块,它将默认为本地模式,您可以在选项中指定模式,如下所示:
          {
            loader: "css-loader",
            options: { 
                modules: { 
                    localIdentName: '[local]___[hash:base64:5]', 
                    mode: 'global',
                }
            }
          },

如果您将模式定义为全局,则所有包含的 css 类都不会被散列名称替换,而只有您指定为 :local 的类将被赋予唯一名称。例如:

/* this will remain as is */
.header {
   color: blue;
}

:local {
  /* this will become something like item_xSH2sa */
  .item {
   color: yellow;
  }
}

  1. 定义一个检查您的文件以确定它是 css 模块还是全局的函数,使用getLocalIdent选项完成。这是我目前在我的设置中使用的方法。这也要求你的文件有一些命名约定,[name].module.less用于 css 模块,[name].less 用于常规文件。请参见下面的示例:
// regex to test for modules, loaderUtils is part of webpack dependencies
const cssModuleRegex = new RegExp(/\.module\.(less|css)$/);
const loaderUtils = require("loader-utils");

// inside webpack rules
      {
        test: /\.(less|css)$/,
        use: [
          {
            loader: CssExtractPlugin.loader,
            options: { hot: is_dev, reloadAll: is_dev }
          },
          {
            loader: "css-loader",
            options: { 
                modules: { 
                    localIdentName: '[local]___[hash:base64:5]', 
                    getLocalIdent: getLocalIdent
                }
            }
          },
          "postcss-loader",
          "less-loader"
        ]
      }

// this is a copy of the default function, modified slightly to achieve our goal
function getLocalIdent(loaderContext, localIdentName, localName, options) {

    // return local name if it's a global css file
    if (!cssModuleRegex.test(loaderContext.resourcePath)) {
        return localName;
    }

    if (!options.context) {
      // eslint-disable-next-line no-param-reassign
      options.context = loaderContext.rootContext;
    }

    const request = path
      .relative(options.context, loaderContext.resourcePath)
      .replace(/\\/g, '/');

    // eslint-disable-next-line no-param-reassign
    options.content = `${options.hashPrefix + request}+${localName}`;

    // eslint-disable-next-line no-param-reassign
    localIdentName = localIdentName.replace(/\[local\]/gi, localName);

    const hash = loaderUtils.interpolateName(
      loaderContext,
      localIdentName,
      options
    );

    return hash
      .replace(new RegExp('[^a-zA-Z0-9\\-_\u00A0-\uFFFF]', 'g'), '-')
      .replace(/^((-?[0-9])|--)/, '_$1');
  }

于 2019-10-01T18:39:15.390 回答
2

我发现全局导入样式但仅适用于特定路线的唯一方法是添加:

<style dangerouslySetInnerHTML={{__html: `
  body { max-width: 100% }
`}} />

在方法的返回里面render

否则,style标签将被添加到<head>,并且样式将应用于所有下一个路由。

来自https://medium.learnreact.com/the-style-tag-and-react-24d6dd3ca974

也许可以将样式作为字符串从文件中导入,以使代码更有条理。

于 2018-04-17T12:24:03.353 回答
2

如果要使用 css 模块,另一种简单的方法是:

<style jsx global>{`
     .slick-prev:before,
     .slick-next:before {
         color: somecolor;
      }
`}</style>
于 2021-01-07T20:10:09.083 回答
0

解决方案 1:

在起点导入全局样式reactapp
整个反应应用程序一直wrapped组件中。
它可以是index.jsapp.jsindex.html

解决方案 2:

使用scss和创建main.scss文件并将所有其他特别需要的文件导入custom scssmain.scss

于 2019-10-01T18:56:42.403 回答
0

我可以说的最佳实践应该有一个 CSS 文件夹,您可以在其中保留整个应用程序所需的所有 CSS,就像我需要的所有组件中的字体大小为 20 一样,因此需要遵循以下步骤:

  • 创建一个名为 css/scss 的单独文件夹(首选 scss)。
  • 创建文件name _font.scss
  • 创建一个文件name index.scss
  • import _font.scssindex.scss@import './fonts';)。
  • 将其导入您的index.js起始文件 ( import "../scss/index.scss")。
  • 现在您可以在整个应用程序中使用您的 CSS。

在这种情况下,您可能会发现重复。例如 - 你有一个全局容器 CSS,它是你的一个文件创建的,但你想为你的一个文件创建一个单独的容器

在这种情况下,为此应用程序名称创建一个单独的 css/scss 文件应该类似于 ( cssname.module.scss) 必须包含.module以便更好地处理。

使用这个 css 你可以导入你的 jsx 文件 ( import Style from './cssname.module.scss')

您可以使用 like className= {Style.container} ,但如果您想同时使用一些全局和本地 css,请从 npm ( npm install classNames)安装 Classnames

如何使用:

import cn from 'Classnames'
className = {cn(Style.container,"fs-20 text-center")}

这里 fs-20 和 text-center 是您的某些文件中存在的全局 CSS

于 2021-09-08T04:17:09.310 回答