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.
Related
I am trying to turn a html/css template to NExtJS App , the problem is that the app is multi-lang So i have two Css file one for Rtl and other for ltr So i do the folowing:
if(router.locale==='ar'){
require('../styles/Style.rtl.css')
}else{
require('../styles/Style.css')
}
the above Code work fine when I use npm run dev .... but When i use npm run build i got some Conflicts because the two Css file are using same classNames and Webpack combine the two file in one generated css file.
So is there any solution for this or other way to import Css file depending on the Current Lang
So, the basic usage of SASS in react is
Install node-sass and import ./mysass.scss in index.js file
I did the same it worked with bootstrap SASS.
I have successfully imported bootstrap.scss in index.js file
import 'bootstrap/scss/bootstrap.scss';
But, now if I try to import mine it did not work.
Let me give you some information about my SASS files.
My style.scss file importing other CSS modules by using #use instead of #import in sass.
For example
Using -> `#use 'sections/navbar';`
Instead of -> `#import 'sections/navbar';`
I am also using #use "sass:map";
Does this #use create the problem?
I have checked the bootstrap.scss file and they are using #import.
See this issue on Github: Link. Solution posted by user asyncLiz.
That error is typically seen when using the node-sass implementation, which does not support Sass modules and is not supported by MDC. You'll need to use the Dart sass implementation.
Luckily it's an easy replacement when using sass-loader. Run npm uninstall node-sass && npm install sass. sass-loader will automatically use the new implementation.
If it does not, check your webpack.config.js in case you're manually specifying the implementation in your sass-loader options. If you are, change implementation: require('node-sass') to implementation: require('sass').
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'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 am using rollup as my module builder and Typescript in my source. Now, I need to define some CSS files for my module.
On importing my CSS file to the .ts file I get the following error
Cannot find module './styles.css'.
How do I generate typings for my CSS files?
I came across an npm package typed-css-modules to generate the typings. I tried using it but again my CSS classes do not get exported to my .ts file.
Anyways, I found the solution to my problem.
I am now using this package to generate Typings
rollup-plugin-postcss-modules