将 css 文件导入特定组件 react 应用程序

多纳塔·米莱凯特

我正在尝试将 css 导入到我的 React 应用程序的特定组件中。

网络包配置：

{
    test: /\.css$/,
    loader: ExtractTextPlugin.extract({
        use: 'css-loader',
    }),
}

但未应用 css。

我还在里面包含了主要的 css index.html。这是我不能应用另一个 css 文件的原因吗？

<link rel="stylesheet" href="../style/style.css">

你能告诉我缺少什么吗？

马特·卡洛塔

这取决于webpack您使用的版本。例如，如果您使用的是 Webpack 4，那么您的development配置将是：

{
  test: /\.s?css$/, // test for scss or css files 
  use: [
    'style-loader', // try to use style-loader or...
    {
      loader: 'css-loader', // try to use css-loader 
      options: {
        sourceMap: true, // allow source maps (allows css debugging)
        modules: true, // allow css module imports
        camelCase: true, // allow camel case imports
        localIdentName: '[local]___[hash:base64:5]', // set imported classNames with a original className and a hashed string in the DOM, for example: "exampleClassName__2fMQK"
      },
    },
  ],
}

example.css（必须使用驼峰式而不是蛇式）

.exampleClassName {
   text-align: center;
}

例子.js

import React from 'react';
import { exampleClassName } from './example.css';

export default () => (
  <h1 className={exampleClassName}>I am centered!</h1>
)

对于生产，您需要使用OptimizeCSSAssetsPlugin和MiniCssExtractPlugin：

minimizer: [
  new OptimizeCSSAssetsPlugin({ 
    cssProcessorOptions: { 
      map: { 
        inline: false, 
        annotation: true 
      } 
    } 
  }),
],
{
  plugins: [
    new MiniCssExtractPlugin({
        filename: `css/[name].[contenthash:8].css`,
        chunkFilename: `[id].[contenthash:8].css`,
    }), 
  ]
}

当您运行webpack以构建用于生产的应用程序时，它将编译css并且（当 webpack 配置正确设置时）将生成一个index.html自动添加link到已编译样式表的。

Webpack 是一个陡峭的学习曲线，上面的例子中缺少很多选项，所以如果你只是想让它启动并运行，那么我有一个Webpack-React-Boilerplate，它有 (s)css 模块导入和已经为您配置了更多。我在 webpack 配置文件中包含了注释，以帮助了解每个选项的作用。

否则，如果你想学习旧版本的 webpack，那么你可以弹出 create-react-app 和逆向工程/查看他们大量的 webpack 注释。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。