This is the first time I am publishing a Vue component to NPM and everything works fine, except the fact that the CSS is not present. It all works as expected when I run it locally but if I create a test project, install the npm package and import the component there is no CSS.
Steps to reproduce:
Create a new Vue project
run npm install elementable-vue
Use this template for App.vue: https://github.com/sandermaas/elementable-vue/blob/master/src/App.vue
Change the import (in the template) to import ElemenTable from 'elementable-vue'
run 'npm run serve'
You can check out the source code on https://github.com/sandermaas/elementable-vue
I can't figure out why this is not working so any help is very much appreciated.
You need to import your css as well in app.vue of your newly created project:
<style>
#import '~elementable-vue/dist/elementable-vue.css';
</style>
Related
I created my project using npx create-next-app new-app. Then started it by npm run dev.
Then I deleted everything in the div and now my index.js looks like this:
import styles from '../styles/Home.module.css'
export default function Home() {
return (
<div className={styles.container}>
Hi
</div>
)
}
But in the browser, it seems like the initial next.js page.
Why isn't the changes taking effect?
Try this:
1- Remove .next folder
2- run npm run build
3-now run npm run dev or npm run start
sometimes Next js has problems with its cached files
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
I'm just starting to learn React (have some JavaScript knowledge, as I'm learning tis as well) and building my first project. I would like to know how to add styles to my first React project, using CSS/SCSS as I have some knowledge and understanding from my html, CSS/SCSS learning projects.
How do you add SCSS to your React Project?
If using create-react-app then:
1)First install sass dependency using npm:
npm install sass --save-dev
2)Import your sass file to your componentName.js file
import '../scss/FileName.scss';
The way to use scss depends a bit on your React development environment. For beginners React recommends using Create React App which is, according to them, "a comfortable environment for learning React, and is the best way to start building a new single-page application in React." You can read more about it at https://reactjs.org/docs/create-a-new-react-app.html. To create your app you simply type the following at the command line:
npx create-react-app my-app
After that, React sets up a full development environment with css files you can edit to style your code.
If you want to continue using create-react-app (sometimes called CRA) and use scss then you can install the Dart Sass library by typing:
npm i sass --save-dev
(Keep in mind that node-sass in deprecated and we are using Dart Sass instead of it)
For a full explanation about how to use node-sass and CRA together see "How to Use SASS in Create React App?": https://www.robinwieruch.de/create-react-app-with-sass-support
Once you move beyond CRA you can tinker with your own webpack.config.js which can also be set up to compile and import SCSS files. But if you are just starting out with React then you may want to leave tinkering with your webpack.config.js for later and stick with CRA.
If you are using create-react-app, just add sass as a dev dependency.
yarn add -D sass or npm install --save-dev sass
Then just replace/rename all CSS files and corresponding imports to *.scss instead of *.css
first, install sass in your project. Then import it into your component.
install sass:
Using npm:
npm install sass
Using yarn
yarn add sass
import in your component:
import example from './example.scss'
Node-sass is deprecated, use sass.
install sass:
Using npm: npm install sass --save-dev
Using yarn: yarn add sass
import in your component: import example from './example.scss'
if you are in starting your new project and want control over webpack config, try to use react-app-rewired or craco, they offer you control over webpack config, by which you can add any loader into your config.
if CRA suffices your need then no need to complicate things above-mentioned packages.
Thanks
npm install sass
create theme/assets folder inside src.
add variable mixins file with underscore.
incude scss file in component scss file.
#import './Assets/mixins';
Here is an link to sample react project with scss
The steps to add Sass to Create React App are:
Install node-sass:
npm install node-sass
or
yarn add node-sass
Since node-sass has deprecated therefore you can use the following steps to install sass :-
npm install sass --save-dev
**or**
yarn add sass
Convert your .css files to .scss
Import your .scss files in your React components like App.js
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 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.