can't import index.scss

[ablbol]

I created a new react project using create-react-app and installed react-redux-toastr following all instructions. The toastr works fine if I use but not when I try to import.
I tried this line (with and without the ~) in my index.scss

@import '~react-redux-toastr/src/styles/index.scss';

I tried this line from my index.js:

import 'react-redux-toastr/src/styles/index.scss';

nothing seems to be working. Here is my package.json:

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "bootstrap": "4.0.0-alpha.6",
    "classnames": "^2.2.5",
    "prop-types": "^15.5.4",
    "react": "^15.4.2",
    "react-apollo": "^1.0.0",
    "react-dom": "^15.4.2",
    "react-geosuggest": "^2.1.0",
    "react-helmet": "^5.0.3",
    "react-infinite-scroller": "^1.0.11",
    "react-redux": "^5.0.3",
    "react-redux-toastr": "^6.2.6",
    "react-router-dom": "^4.0.0",
    "react-transition-group": "^1.1.3",
    "reactstrap": "^4.5.0",
    "redux": "^3.6.0",
    "redux-form": "^6.6.1",
    "shortid": "^2.2.8"
  },
  "devDependencies": {
    "node-sass-chokidar": "^0.0.1",
    "npm-run-all": "^4.0.2",
    "react-scripts": "^1.0.6"
  },
  "scripts": {
    "build-css": "node-sass-chokidar src/styles -o src/styles",
    "watch-css": "npm run build-css && node-sass-chokidar src/styles -o src/styles --watch --recursive",
    "start-js": "yarn react-scripts start",
    "start": "npm-run-all -p watch-css start-js",
    "build": "npm run build-css && react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"

  },
  "main": "index.js",
  "license": "MIT",
  "proxy": "http://localhost:3001/"
}

Could you please point me in the right direction.
Thanks for your help

[diegoddox]

@ablbol, You may need to add some custom Webpack config for handle this kind of import or try this in your js file require('style!css!sass!react-redux-toastr/src/styles/index.scss');

[ablbol]

I tried the require and import and got the following message

Unexpected '!' in 'style!css!sass!react-redux-toastr/src/styles/index.scss'. Do not use import syntax to configure webpack loaders  import/no-webpack-load
er-syntax

I know that if I require css file, it will work because i am requiring other css files. Right now, I am not working directly with webpack since create-react-app does so.
Thanks

[diegoddox]

You will need to add the sass-loader in your webpack config, take a look at this issue

[larsts]

I realize this is an old question, but I ran into similar issue.
Could he not circumvent sass-loader and import the minimized css directly from lib\css?

I.e. add this line in the .js file:
import "react-redux-toastr/lib/css/react-redux-toastr.min.css";

[diegoddox]

@larsts Try this require('style!css!react-redux-toastr/lib/css/react-redux-toastr.min.css')

[Nantris]

@larsts solution works for me. none of the others did, despite having sass-loader configured.

[paddotk]

@diegoddox Where in the config file would I have to add the line require('style!css!react-redux-toastr/lib/css/react-redux-toastr.min.css')?

[diegoddox]

Hi @paddotk,
You will only be able to do that if you're using Webpack and if so add it on the main file of your project.

[paddotk]

@diegoddox Thanks, but what I would like to know is where in this file to do so. I tried adding it directly in the module.exports = {} object but that doesn't work.

That said, I did find a workaround by adding <link href="https://diegoddox.github.io/react-redux-toastr/7.1/react-redux-toastr.min.css" rel="stylesheet" type="text/css"> to my project's root html file. But this is not really the right way.

[diegoddox]

@paddotk Include that code in the same file where you have your ReactDOM.render

[paddotk]

Sorry, that doesn't work for me. Perhaps it's because of our application structure? Because it requires me to write it as import 'style!css!react-redux-toastr/lib/css/react-redux-toastr.min.css', which gives me an error not knowing what 'style' is. import 'react-redux-toastr/lib/css/react-redux-toastr.min.css' doesn't give an error but doesn't work either.

[diegoddox]

Is your project using Webpack, if so do you have added the css loader?