I'm designing a React component to publish to NPM, and I'm unable to load a css file into my component. I get the error
Module not found: Error: Can't resolve './styles.css'.
I'm using relative pathing, and I'm sure the path is correct.
I've tried installing css-loader, styles-loader, and sass-loader, with no luck. I'm not using webpack either.
The line I'm using to import the CSS file in my component is
import './styles.css';
I'd like to know how one can import CSS files into React components?
Related
I am using express on the server and using jsx as the view engine. When I try to import CSS files in my jsx file
import './style.css' the page throws an error on the first line
#container{
^^
Unexpected identifier
Even if I use other css files, for eg.
import antd\dist\antd.css it throws the same error. Please tell me if I should add any more details. Please help.
Edit: Someone told me that I need to configure style-loader because I am not using webpack or create-react-app but using jsx as a view engine. Any suggestions or steps on how to do that would be appreciated. I have already npm installed style-loader and css-loader
I have a problem, I'm trying to build a component library and at the same time I would like to have a dev server in the same project for fast debugging and developing of this component library.
Currently my configuration is next, for library building I use typescript to transpile to es5 and I have all styles as scss and compile them into css with node-sass. For this config to work I import styles as css(not sass) since otherwise scss files won't be found in lib directory.
Here are my source files:
And this is lib folder after being compiled:
And this is my configuration for building lib folder
Now I'm trying to configure dev server with webpack and I decided to import components directly from src (not lib) to fast forward development. And it doesn't work with my current styles imports (as css) because webpack compiles my scss styles as a big bundle and merges it into js bundle but those statements where I import css are still there which case errors.
Module not found: Error: Can't resolve './Title.css'
I believe there is a solution to this problem but which way to take I'm not sure, please suggest!
My preference is to keep library building without webpack and use webpack for dev server
I attempting at using the react-draft-wysiwyg npm (https://jpuri.github.io/react-draft-wysiwyg/#/docs?_k=jjqinp). I get a
/Users/timurozkul/Documents/Repo/Others/blog/Blog/pre_app/node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg.css:1
SyntaxError: Unexpected token .
When I follow the method on the documentation as below
How do I import css files into JSX files without web pack?
I have copy pasted the css styles from the npm into my own stylesheets. Which solved my issue. My best guess is that it is possible with Webpack and not without it because of formatting.
I have a React component and I publish the component in NPM registry that I build with webpack. In my main project I consumed the component npm package JS like that:
import myComp from 'myComp';
The problem is that myComp also has CSS, that I build into dist/index.css with the help of webpack and ExtractTextPlugin (which builds all the css into one file).
And I want to consume the style like this:
import 'myComp/index.css';
Or
import 'myComp/index';
And in myComp npm package I want to expose it in a way that will support this import method.
NOTE: I don't want to import it directly from node_modules
import '../../../node_modules/myComp/index.css'; // bad
Thanks!
So it's easier than I thought, all you need to do is import the CSS like that (as I did in the question):
import 'myComp/dist/style.css';
And make sure your tools (browserify/webpack etc..) can handle loading css into your javascript file.
So the issue was more related to the building process.
Also, if you want to push specific code into npm registry you can use "files" inside package.json. This way you'll end up with just the files you need in npm registry.
files: [
"dist/*.css"
]
You can also use tools like:
https://github.com/rotundasoftware/parcelify - for browserify
https://www.npmjs.com/package/parcelify-loader - for webpack
But I didn't like them. It forces a dependency on the consumer of your npm package.
I'm writing a client-side app that is using Webpack, and I cannot figure out how to require the materialize-css package. I'm using Henrik Joreteg's hjs-webpack package, and with this the yeticss npm package is included by doing an import in a sass file (e.g. #import 'yeticss'), but this doesn't work for materialize. Requiring it straight up in the code (e.g. import 'materialize-css' in a JS file) like any other package also doesn't work.
In this case, unlike with yeticss, you need to go in and require the specific files, rather than just the package name, thus:
import 'materialize-css/dist/css/materialize.min.css';
import 'materialize-css/dist/js/materialize.min';
In my case I'm using create-react-app, and I was able to execute:
yarn add materialize-css
And then in my index.js (top level react file):
import '../node_modules/materialize-css/dist/css/materialize.min.css';
import '../node_modules/materialize-css/dist/js/materialize.min';