Question

我使用create-react-app创建了一个反应应用程序，一切正常，但我无法弄清楚如何加载css / stylus文件。

在我之前使用create-react-app创建的反应项目中，我使用了webpack.config，但现在我不知道该文件的位置以及如何使用它。

这是我的文件夹结构：

.  
+--client  
|  +--node_modules
|  +--public
|  +--src
|  +--package.json
+--server
|  +--node_modules
|  +--src
|  +--.babelrc
|  +--package.json

这是我之前的webpack.config.dev.js文件：

import path from 'path';
import webpack from 'webpack';

export default {
  entry: [
    'webpack-hot-middleware/client?reload=true',
    path.join(__dirname, '/client/index.js')
  ],
  output: {
    filename: 'bundle.js',
    path: '/',
    publicPath: '/'
  },
  plugins: [
    new webpack.NoEmitOnErrorsPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        include: path.join(__dirname, 'client'),
        loader: 'babel-loader',
      },
      {
        test: /\.styl$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'stylus-loader',
          },
        ],
      },
      {
        test: /\.css?$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
          },
        ],
      },
    ],
  },
  resolve: {
    extensions: [ '.js', '.styl' ]
  }
}

如果我需要提供更多信息，请与我们联系。

Answer 1

其中一种方法涉及从JS文件加载CSS文件（通过css-loader），用于Text.jsx

import React from 'react';
import './screen.css'; // if screen.css is located next to Text.jsx

class Text extends React.Component {
  // ...
}

export default Text;

您还可以使用例如生成输出CSS。 ExtractTextPlugin（参见Webpack2 loading and extracting LESS file）

Answer 2

有关于如何在其文档中添加SCSS和Less文件到create-react-app项目的详细信息。您可以查看here了解更多详情。

您可以添加基本的CSS样式，只需导入文件，如下所示;

import '/css/main.css';

或者您可以添加为classNames

const styles = {
   header: {
     fontSize: 18,
     color: '#909090',
   }
 };

 export default class Header extends React.Component {
   render() {
     return (
       <h1 className={styles.header}>This is a header</h1>
     );
   }
 }

如何在反应应用程序中加载css？

2 个答案: