Develop Reference

Import Stencil JS library from another Stencil JS library

I have two libraries of Stencil JS web components, library-a and library-b. These are not apps, just separate npm packages of components.
I would like to use some of the components from library-a inside library-b. How do I import components from A into B?
The StencilJS docs offer some import instructions but don't cover this particular use case.

Basically all you have to do is npm install (or npm link) the project and import it.
As far as I know there are two places you can include the import:
Inside a global app.ts which is configured as a globalScript in stencil.config.ts.
Inside the root component.
In your case the second option probably won't work since component libraries usually don't have a root component.
Import inside app.ts:
First, create a global script and configure it in your stencil.config.ts:
export const config: Config = {
// ...
globalScript: 'src/global/app.ts',
};
Then add the import inside that file. Example for Ionic Framework:
import '#ionic/core';
Now you can use the components just like any other HTML element.

minify css using inline imports in webpack

We have lot of pages and lots of stylesheets. We wanted to inline some critical styles on some components to avoid network requests; I'd achieved the requirement by using style-loader with inline import in webpack 4 like this:
import React from "react";
import "./style.sass";
import FancyButton from "components/UIkit/FancyButton";
to: (!! at the beginning will disable all configured loaders)
import React from "react";
import "!!style-loader!css-loader!sass-loader!./style.sass";
import FancyButton from "components/UIkit/FancyButton";
this works fine and injects the scss into <style></style> tag; BUT in won't minfiy css.
I need a way to minify them too; preferably using inline import commands, magic comments or something like this:
!style-loader!require('mini-css-extract-plugin').loader!css-loader!less-loader!./style.less
our webpack config is ejected version create-react-app with slight modification to meet our needs. and for normal imports it works perfectly fine; and minifies all the csss using MiniCssExtractPlugin. but Inlining imports won't follow the default pipeline and hence no minification.
I also welcome other suggestions to inline critical styles; (consider they can be .scss, .less, .module.scss)
excluding this way:
Inline CSS using Webpack

React - files import

I have a question about importing files in React.js (create react app).
For example, I have two components firstComponent.js and secondCmponent.js
In both files I import the same file with CSS styles:
import 'some.css';
Does this mean that after building the application I will have code from some.css x2?
If I call the components side by side (at the same time)
example:
<div>
<FirstComponent />
<SecondComponent />
</div>
In the browser memory, some.css will be x2?

create-react-app under the hood uses Webpack which is a module bundler that takes all your files and output them in one file so when you use a file for example .css file in many places webpack will only include that file only one in your output file > so you don't have to worry . that's also works for other assets like images , fonts , js files
learn more about webpack
webpack tutorial

But why do you include the same file twice? Why cant you split your css into three files:
Main.css (contains standard styling)
FirstComponent.css (contains specific styling for FirstComponent.js)
SecondComponent.css (contains specific styling for SecondComponent.js)
and then in your files:
App.js
import './Main.css';
class App extends React.Component {
render () {
<div>
<FirstComponent />
<SecondComponent />
</div>
}
}
FirstComponent
import './FirstComponent.css';
class FirstComponent extends React.Component {}
SecondComponent
import './SecondComponent.css';
class SecondComponent extends React.Component {}
this wont give you the double file import like you experience.
Another use by ejecting
dont use this if you dont know what your'e doing..
You can with the help of webpack plugins, manage your chunks that if a thing gets imported N times, it will be moved into a commons.js file, before webpack 4 this was called commonChunksPlugin, now at webpack 4, i dont have this in my head, but i do think this is more or less included by default nowadays (need source).

When I was doing export file I use this is correct way
Import named exports from the file Mamatha.js:
import { name, age } from "./Mamatha.js";

Grommet integration with create-react-app

i'm looking for a way to integrate grommet framework to a react app created with the cli.
I want to use react grommet components inside my app but there are some problems with the preprocessor SCSS. Today, I tried to integrate them in a lot of ways, I followed a lot of tutorials but It still doesn't working. Do you know or do you have success to use them together ? Thankss

For Grommet 1.x
If you don't want to add scss to your project, grommet-css is a great alternative. You can install it and import the css into your App.js.
Note that to customize the default theme you have to fork the repo, make changes like including a different default grommet style in index.scss or tweaking grommet scss variables. Then you have to update the name in package.json, run npm build, then run npm publish.
Here is an example using grommet and grommet-css
import React, { Component } from 'react'
import '../../node_modules/grommet-css';
import Heading from 'grommet/components/Heading';
import Box from 'grommet/components/Box';
export default class GrommetExample extends Component {
render() {
return (
<Box>
<Heading>Hello, I'm a Grommet Component styled with <a href='https://www.npmjs.com/package/grommet-css'>grommet-css</a></Heading>
</Box>
)
}
}

Webpack CSS filename in JS file

I am writing a React app with create-react-app which uses Webpack and the extract-text-plugin to generate bundled js and css files. Now I would like to know the filename of the generated CSS file in my JS file, like so:
import React, { Component } from 'react';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
{fileNameOfMyGeneratedCssFileHere}
</div>
);
}
}
export default App;
Is that even possible, maybe with a custom loader or Webpack plugin?
edit To clarify: create-react-app is not the problem here, I can eject it or create a custom configuration. My problem is how to know the CSS file name(s) from inside a JS script.