Question

create-react-app以一个看起来像这样的App.js启动你：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

注意import './App.css' - 匿名导入此CSS文件。 App.css有像App和App-header这样的CSS类，然后在React组件的render方法中用字符串引用。这种神奇的联系是如何发生的？这是css-loader npm包的功能吗？如果是，那么这个功能记录在哪里？我已经弹出应用程序来检查Webpack配置，但是无法确定这种链接是如何发生的。

Answer 1

根据create-react-app README，css导入由Webpack插件处理。

此项目设置使用Webpack处理所有资产。 Webpack提供了一种“扩展”JavaScript导入概念的自定义方式。要表示JavaScript文件依赖于CSS文件，您需要从JavaScript文件中导入CSS ...您应该知道这使得您的代码比Webpack更不容易移植到其他构建工具和环境。

使用create-react-app创建的项目的构建系统位于另一个名为package.json的包中。这个项目的<cfcomponent> <cffunction name="retrieveCustomers" returntype="struct" returnformat="json" access="remote"> <cfstoredproc datasource="#application.dsn_spoon#" procedure="proc_getUsers_paged"> <cfprocparam cfsqltype="cf_sql_varchar" value="#username#"> <cfprocresult name="qResult1" resultset="1"> <cfprocresult name="qResult2" resultset="2"> <cfprocresult name="qResult3" resultset="3"> </cfstoredproc> <cfset _results = structNew()> <cfset _results.result1 = qResult1> <cfset _results.result2 = qResult2> <cfset _results.result3 = qResult3> <cfreturn _results> </cffunction> </cfcomponent> includes a dependency位于css-loader，它似乎是用于允许css导入的插件。

Answer 2

如果您正在使用create-react-app，那么据我所知，所有的魔法应该发生在您安装和运行的react-scripts模块中。

在create-react-app中链接CSS

2 个答案: