Неожиданный маркер .в то время как добавить CSS в файл JSX - PullRequest
Новая
       6

Неожиданный маркер .в то время как добавить CSS в файл JSX

0 голосов
/ 27 ноября 2018

Это ошибка, которую я получаю. 

    /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';

Это в моем файле конфигурации веб-пакета: 

    {
        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;
    }

1 Ответ

0 голосов
/ 27 ноября 2018

Ничего не было экспортировано из файла CSS.Исправить это ... 

import './AnswerDetail.css';

Изменить файл конфигурации ... 

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