Error "Unexpected token ." while import external css to a component

manhhailua commented 8 years ago

I'm using React-Starter-Kit and trying to integrate with AdminLTE. When I imported a css from AdminLTE I got this error.

import s from './Login.css';
import s_iCheck from 'admin-lte/plugins/iCheck/square/blue.css';

If I change the background url from url(blue.png) to url("./blue.png"), the error "Cannot resolve module" will disappear but the error "Unexpected token ." still exist.

/home/nginx/domains/vps.manhhailua.com/public/node_modules/admin-lte/plugins/iCheck/square/blue.css:3
.icheckbox_square-blue,
^
SyntaxError: Unexpected token .
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:513:28)
    at Object.Module._extensions..js (module.js:550:10)
    at Module.load (module.js:458:32)
    at tryModuleLoad (module.js:417:12)
    at Function.Module._load (module.js:409:3)
    at Module.require (module.js:468:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/home/nginx/domains/vps.manhhailua.com/public/build/webpack:/external "admin-lte/plugins/iCheck/square/blue.css":1:1)
    at __webpack_require__ (/home/nginx/domains/vps.manhhailua.com/public/build/webpack:/webpack/bootstrap cf2ab8e448863bf0ab23:19:1)
    at Object.<anonymous> (/home/nginx/domains/vps.manhhailua.com/public/build/webpack:/routes/login/Login.js:15:1)
    at __webpack_require__ (/home/nginx/domains/vps.manhhailua.com/public/build/webpack:/webpack/bootstrap cf2ab8e448863bf0ab23:19:1)
    at Object.module.exports.Object.defineProperty.value (/home/nginx/domains/vps.manhhailua.com/public/build/webpack:/routes/login/index.js:11:1)
    at __webpack_require__ (/home/nginx/domains/vps.manhhailua.com/public/build/webpack:/webpack/bootstrap cf2ab8e448863bf0ab23:19:1)
    at Object.module.exports.Object.defineProperty.value (/home/nginx/domains/vps.manhhailua.com/public/build/webpack:/routes/index.js:16:1)
    at __webpack_require__ (/home/nginx/domains/vps.manhhailua.com/public/build/webpack:/webpack/bootstrap cf2ab8e448863bf0ab23:19:1)

langpavel commented 8 years ago

Did you tried import by relative path (something like import s from '../../node_modules/admin-lte/plugins/...)? Another way is to setup webpack (tools/webpack.config.js), but I don't know precisely how to do this correctly. There are related issues to this, please try find answer in old issues. If you didn't find you answer, ask at Gitter channel and please write a summary here and close this issue. Thanks!

manhhailua commented 8 years ago

Yes, I did! Using tools/webpack.config.js will import css directly to the whole app. I just want to import some css files to specific component.

frenzzy commented 8 years ago

Try this solution: https://github.com/kriasoft/react-starter-kit/issues/771#issuecomment-236359383

manhhailua commented 8 years ago

@frenzzy : thank you for your help!

kriasoft / react-starter-kit

Error "Unexpected token ." while import external css to a component #824