Question

我是React的初学者，遇到了一些问题。无法在react应用中导入外部CSS文件。并且在导入时，我收到一个错误消息，“您可能需要适当的加载程序来处理此文件类型，当前没有配置任何加载程序来处理此文件”。我在webpack配置中添加了CSS加载器和样式加载器，但仍然收到此错误。

**Webpack.config.js**

var path = require('path')
var webpack = require('webpack')
var nodeExternals = require('webpack-node-externals')


var browserConfig = {
  entry: './src/browser/index.js',
  output: {
    path: path.resolve(__dirname, 'public'), // create a public folder
    // and inside this we'll create file named bundle.js which contain
    // the whole app contained in one file
    filename: 'bundle.js',
    publicPath: '/'
  },
  module: {
    rules: [
      { test: /\.(js)$/, use: 'babel-loader'}, // whenever webpack found
      // any .js file then it will call babel-loader to convert JSX into
     // vanilla js
      {
       test:/\.css$/,
       use:['style-loader','css-loader']
    }
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      __isBrowser__: "true" // plugin help to know whether we are in 
      // browser rendered page or server rendered page.
    })
  ]
}

var serverConfig = {
 entry: './src/server/index.js',
 target: 'node',
  externals: [nodeExternals()],
  output: {
    path: __dirname,
    filename: 'server.js',
    publicPath: '/'
  },
  module: {
    rules: [
  { test: /\.(js)$/, use: 'babel-loader' },
  {
    test:/\.css$/,
    use:['style-loader','css-loader']
    }
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      __isBrowser__: "false"
    })
  ]
}

module.exports = [browserConfig, serverConfig]

package.json

{
  "name": "React-App",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev-server": "nodemon --exec babel-node src/server/server.js --ignore public/",
    "dev-bundle": "webpack -w -d"
  },
     "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/core": "^7.10.2",
    "@babel/node": "^7.10.1",
    "@babel/preset-react": "^7.10.1",
    "babel-loader": "^8.1.0",
    "@babel/preset-env": "^7.9.6",
    "express": "^4.17.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-router-dom": "^5.2.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-node-externals": "^1.7.2"
  },
  "devDependencies": {
       "babel-eslint": "^10.1.0",
    "cors": "^2.8.5",
    "css-loader": "^3.5.3",
    "eslint": "^7.2.0",
    "eslint-plugin-react": "^7.20.0",
    "eslint-plugin-react-hooks": "^4.0.4",
    "nodemon": "^2.0.4",
    "serialize-javascript": "^3.0.0",
    "style-loader": "^1.2.1"
  }
}

babel.config.js

module.exports = {
presets: ['@babel/preset-env', '@babel/preset-react'],
 };

Home.js

import React from 'react';
import {Link} from 'react-router-dom';
import './../styles/NavBar.css';


 export default function Home () {
     const myStyle = {
        "margin-left":"25%",
        "padding":"1px 16px",
        "height":"1000px"
   };
  return (
    <>
    <ul>
    <li><a class="active" href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
   </ul>

    <div style={myStyle}>
  <h2>Fixed Full-height Side Nav</h2>

</div>
</>
  )
}

NavBar.css

ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
  }

  li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
  }

  li a.active {
background-color: #4CAF50;
color: white;
  }

  li a:hover:not(.active) {
background-color: #555;
color: white;
  }

错误

C:\React-App\src\styles\NavBar.css:1
ul {
   ^

SyntaxError: Unexpected token '{'
    at wrapSafe (internal/modules/cjs/loader.js:1047:16)
    at Module._compile (internal/modules/cjs/loader.js:1097:27)
    at Module._extensions..js (internal/modules/cjs/loader.js:1153:10)
    at Object.newLoader [as .js] (C:\React-App\node_modules\pirates\lib\index.js:104:7)
    at Module.load (internal/modules/cjs/loader.js:977:32)
    at Function.Module._load (internal/modules/cjs/loader.js:877:14)
    at Module.require (internal/modules/cjs/loader.js:1019:19)
    at require (internal/modules/cjs/helpers.js:77:18)
    at Object.<anonymous> (C:\React-App\src\shared\/Home.js:3:1)
    at Module._compile (internal/modules/cjs/loader.js:1133:30)

Answer 1

您的设置看起来不错，不确定Home.js文件。到现在为止还没有那样使用过。可能是它的新书写方式。

其他老虎钳尝试将文件更改为Home.jsx，将Webpack更改为

{ test: /\.(js|jsx)$/, use: 'babel-loader' }

收到错误-“您可能需要适当的加载程序来处理此文件类型，当前未配置任何加载程序来处理此文件”

1 个答案: