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
Related
I'm building a style guide based on a Sass / CSS library I had built earlier. I installed the library in my package.json as a devDependency using npm (on npm I have a private package for my library). My problem is that when I try to compile Sass using node-sass, it returns following error:
"Couldn't find the stylesheet to import"
The file I want to import is called tsw.scss. In any other project in which I have been using node-sass, I never had problems compiling (or at least I always managed to find them and solve them alone). So, I really can not understand, where I'm wrong this time. Could any of you help me understand what my mistake is and fix it?
Thanks in advance to anyone who will help me.
This is the code I used in my "styles.scss" file (of my style guide) in which I want, in fact, to import the library I previously created (the import that gives me the error is the import of the first line).
#import "~#alllearnit/tsw/tsw";
#import "tsw-guide-styles";
If needed, I could share any part of my code that you may need to better understand my project and therefore to help you to solve the problem.
Thanks again for all the help you will give me
Regards
Alessandro
The ~ at the front of the import isn't natively supported by node-sass. There maybe a plug-in you're expecting to be loaded if you copied that snippet from somewhere else.
I'm creating the initial setup of a proof of concept project using ReactJS and typescript, and I'd like to include the CSS modules in it without having to eject the webpack configuration.
Here are the steps I followed so far:
npm install -g create-react-app
create-react-app firstapp --scripts-version=react-scripts-ts
npm install react-app-rewired --save-dev
npm install --save-dev codebandits/react-app-rewire-css-modules sass-loader node-sass
package.json:
"start": "react-app-rewired start --scripts-version react-scripts-ts"
config-overrides.js:
const rewireCssModules = require('react-app-rewire-css-modules');
module.exports = function override(config, env){
config = rewireCssModules(config, env);
return config; }
I correctly set my App.module.scss file, and referenced it in my App.tsx file:
import styles from './App.module.scss';
When I run the project, I have an error regarding the css module:
Cannot find module './App.module.scss'.
When I do the exact same project without the typescript configuration, it works though.
What should I change for the CSS modules to be taken into account?
I came accross typings-for-css-modules-loader, but I'm not sure how to integrate it in my configuration since I didn't eject the webpack configuration.
Thanks in advance,
Thomas .T
EDIT 1:
I added a global.d.ts file with:
declare module '*.css'
declare module '*.scss'
And it did the trick. I didn't use typings-for-css-modules-loader in the end.
The answer comes from this article: https://hackernoon.com/zero-config-react-typescript-css-modules-jest-with-poi-bbcedfe2383a
I added a global.d.ts file with:
declare module '*.css'
declare module '*.scss'
And it did the trick. I didn't use typings-for-css-modules-loader in the end.
The answer comes from this article: https://hackernoon.com/zero-config-react-typescript-css-modules-jest-with-poi-bbcedfe2383a
Gonna accept this as an answer within 2 days.
I got the workaround after googling a lot. I'm new to react js and trying to build using typescript so I found the solution and started using
react-script-ts
package. But when I started using css module faced the problem import class from './button.css' didn't work so I used import './button.css' but in this got lot of css conflicts, higher component scope css always overridden by lower component. so googled a lot and finally got the solution.
Solution
From 2.1 create-react-app having support for typescript so convert your application to 2.1 above
1.create new application using `npx create-react-app my-new-app --typescript`
2. replace your old src folder in new solution
3. Rename all your css file with `*.module.css` and change the import based on that.
4. Add your package dependancy if anything missing
5. Run
source : https://joshblog.net/2018/upgrading-a-react-and-typescript-app-from-react-scripts-ts-to-create-react-app-v2-1/
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?
I'm trying to build a test project with TypeScript via Webpack. Have just index.ts file and base.less (or base.css) file imported in index.ts and it fails with errors on css-loader. Without imported LESS (CSS) file in a .ts file all working good.
I have got another big project with JS only (no TypeScript) and it working good with the same webpack.config file (babel instead of ts loader).
Webpack#2.2.0
All needed loaders are installed.
webpack.config.js and Bitbucket link to the test project
ERROR in ./~/css-loader/lib/css-base.js
Module build failed: Error: Final loader didn't return a Buffer or String
You have a wrong RegExp rule for TypeScript loader in your webpack.config.js. You need this:
`test: /(.ts|.tsx)$/`
but you have this:
`test: /(.ts|.tsx)?/`
Which says: load as TypeScript file no matter what.
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.