javascript - 尝试让 CSS 在我的项目中工作 - 尝试排除故障

Question

我正在尝试让 css 文件在我的 React 项目中工作。我一直在个人项目中使用create-react-app，但这个项目是从webpack创建的，所以我必须配置加载器等，我的理解是有限的。更糟糕的是，我继承了该项目，并将所有样式应用于每个组件上的样式对象，因此这里存在多种复杂性。但无论如何，css 文件与组件的 JS 文件位于完全相同的文件夹中。我尝试将 css 样式表作为文件导入到我的 Home 组件中，如下所示:

import from './home.css'

我遇到的错误是...

Module build failed: SyntaxError: Unexpected token (10:12)
import from './home.css'

...并且有一个红色箭头指向 ./home.css 之前的 '。

我的 webpack 配置文件的加载器部分如下所示:

module : {
  loaders : [
    {
      test : /\.jsx?/,
      include : APP_DIR,
      loader : 'babel-loader'
    },
    {
      test: /\.css$/,
      use: [ 'style-loader', 'css-loader' ]
    },
    {
      test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2|otf)$/,
      loader: 'url-loader',
      options: {
        limit: 10000
      }
    }
  ]
},

并且，为了更好地衡量，这是我的 package.json...

{
  "name": "react-cbd",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "devNoServer": "webpack --d --watch",
    "dev": "webpack-dev-server --watch --progress --colors",
    "build": "webpack -p",
    "build-css": "node-sass-chokidar src/ -o src/",
    "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "copy-webpack-plugin": "^4.2.3",
    "css-loader": "^0.28.9",
    "font-loader": "^0.1.2",
    "jquery": "^3.2.1",
    "lodash": "^4.17.4",
    "moment": "^2.20.1",
    "node-sass-chokidar": "0.0.3",
    "react": "^16.0.0",
    "react-bootstrap-carousel": "^2.2.1",
    "react-datetime": "^2.11.1",
    "react-dom": "^16.0.0",
    "react-fontawesome": "^1.6.1",
    "react-motion": "^0.5.2",
    "react-redux": "^5.0.6",
    "react-router-dom": "^4.2.2",
    "react-scrollbars": "0.0.5",
    "redux": "^3.7.2",
    "style-loader": "^0.19.1",
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.5"
  },
  "devDependencies": {
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-stage-2": "^6.24.1",
    "css-loader": "^0.28.8",
    "file-loader": "^1.1.5",
    "url-loader": "^0.6.2"
  }
}

Answer 1

您需要使用组件名称来引用导入。

import ComponentName from './home.css'