意外的标记 。同时将css添加到jsx文件中

Question

这是我遇到的错误。

    /Users/gkapatia/git/bolo-mobile-web
    app/src/components/AnswerDetail/AnswerDetail.css:1
    (function (exports, require, module, __filename, __dirname) { .example-appear {
                                                          ^

    SyntaxError: Unexpected token .
        at new Script (vm.js:83:7)
        at createScript (vm.js:267:10)
        at Object.runInThisContext (vm.js:319:10)
        at Module._compile (internal/modules/cjs/loader.js:685:28)
        at Module._extensions..js                 (internal/modules/cjs/loader.js:733:10)
        at Object.newLoader [as .js] (/Users/gkapatia/git/bolo-mobile-web-app/node_modules/pirates/lib/index.js:88:7)
        at Module.load (internal/modules/cjs/loader.js:620:32)
        at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
        at Function.Module._load (internal/modules/cjs/loader.js:552:3)
        at Module.require (internal/modules/cjs/loader.js:658:17)
        at require (internal/modules/cjs/helpers.js:22:18)
        at Object.<anonymous> (/Users/gkapatia/git/bolo-mobile-web-app/src/components/AnswerDetail/AnswerDetail.jsx:12:1)
        at Module._compile (internal/modules/cjs/loader.js:722:30)
        at Module._compile (/Users/gkapatia/git/bolo-mobile-web-app/node_modules/pirates/lib/index.js:83:24)
        at Module._extensions..js (internal/modules/cjs/loader.js:733:10)
        at Object.newLoader [as .jsx] (/Users/gkapatia/git/bolo-mobile-web-app/node_modules/pirates/lib/index.js:88:7)
        at Module.load (internal/modules/cjs/loader.js:620:32)
        at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
        at Function.Module._load (internal/modules/cjs/loader.js:552:3)
        at Module.require (internal/modules/cjs/loader.js:658:17)
        at require (internal/modules/cjs/helpers.js:22:18)
        at Object.<anonymous> (/Users/gkapatia/git/bolo-mobile-web-app/src/App.jsx:3:1)
    error Command failed with exit code 1.
    info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

这是我导入CSS的方式：

    import AnswerDetailCss from './AnswerDetail.css';

这是在我的webpack配置文件中：

    {
        test: /\.css$/,
        use: [
           'style-loader',
           { loader: 'css-loader', options: { importLoaders: 1 } }
        ]
    }

我已经在stackoverflow的不同问题中尝试了所有方法，但仍然无法弄清楚。我已经使用了webpack 4，babel 7！

编辑::::::

文件结构。我正在AnswerDetail.jsx中将导入位置用于AnswerDetail.css。

   <pre> /Users/gkapatia/git/bolo-mobile-web-app
    ├── data
    |  ├── api-real-url.js
    |  └── mock-answer.json
    ├── dist
    |  └── bundle.js
    ├── node_modules
    |  ├── all node mdules
    ├── out.txt
    ├── package.json
    ├── public
    |  └── index.html
    ├── readme.md
    ├── server
    |  └── index.jsx
    ├── src
    |  ├── App.jsx
    |  ├── assests
    |  |  ├── bolo_logo.png
    |  |  └── bolo_white.png
    |  ├── components
    |  |  ├── AnswerDetail
    |  |  |  ├── AnswerDetail.css
    |  |  |  ├── AnswerDetail.jsx
    |  |  |  └── style.js
    |  |  └── common
    |  |     ├── ShareDialog
    |  |     |  ├── ShareDialog.css
    |  |     |  └── ShareDialog.jsx
    |  |     └── VideoPlayer
    |  |        └── VideoPlayer.jsx
    |  ├── getStore.js
    |  ├── index.jsx
    |  ├── reducers
    |  |  ├── answers.js
    |  |  └── index.js
    |  ├── sagas
    |  |  └── fetch-answers-saga.js
    |  └── styles
    |     └── App.css
    ├── util
    |  └── log.js
    ├── webpack.config.dev.babel.js
    ├── webpack.config.prod.babel.js
    ├── yarn-error.log
    └── yarn.lock

编辑:::::::::: 这是我的css文件

    .example-appear {
      opacity: 0.01;
    }

Answer 1

什么都没有从css文件导出。 解决这个问题...

import './AnswerDetail.css';

修改配置文件...

{
    test: /\.css$/,
    use: [
       { loader: "style-loader" },
      { loader: 'css-loader', options: { importLoaders: 1 } }
    ]
}