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.
Related
So I downloaded a package from NPM its called react-csv-importer. My React app is using scss to customize layouts. I am coding from a react-bootstrap template I purchased from react-bootstrap.
Their layout is confusing me and I cant seem to understand how to customize an NPM package I install...
Here is a photo of the index.css file that contains everything I need to edit
Here is a screenshot of the layout of the SCSS
Here is another screenshot inside the theme folder, It contains most of the scss files
Now shouldnt I just be able to create a new file called something like csv-importer.scss and then copy the code from index.css thats located in the NPM package and update it in the SCSS? How do people go about editing an NPM install this way?
You should never customize or touch a package you've installed through npm. If you change the package in node_modules then 1. it will get overwritten as soon as you do npm install again, 2. it won't be saved to your github since you need to exclude node_modules with .gitignore. node_module packages should be left alone, untouched.
Instead you should import the things you need to use from packages and use it in your own code. So if you have a package called "example" that you've installed through npm then you need to do:
import Something from 'example'
// use Something here
In order to use it. This is how you use stuff from node_modules.
In your case you should likely import the styles from the package you've installed, either through scss #import or through node import, after which you can use it in your own code. However you should not modify the original code they have.
If the package they have is .css then you can't change that to .scss, you'll just have to use it as .css. Which is not such a big deal since scss will get compiled to css anyways.
What you can do is to import all of their styles through #import and then to overwrite the things you want in your own code or scss.
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').
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>
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 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';