I'm trying to migrate an app which was using SystemJS to ng-cli environment. I don't want to change too much the structure of the app, and beside, I dont use a css file for each component, I want to keep it global.
When I run ng serve, I get the following error :
ERROR in ./src/app/components/guest-sidebar.component.ts
Module not found: Error: Can't resolve './assets/css/guest-sidebar.css' in '/project/src/app/components'
I'm pretty new on ng-cli or webpack, how do I tell ng-cli I dont want it to associate components with their css and handle it separatly ?
Use this flag: --inline-style (alias: -is) default value: false
If you specify true then it will expect you to handle the styles "inline" and won't generate a separate css file.
Related
I need to access a css file of a node_modules package to create swagger documentation inside an endpoint from the Next API.
Tree shaking is being done, so the css files from the swagger-ui-dist package are removed. How to avoid it? I tried to use "sideEffects" in next.config.js webpack key, but still the css file disappeared.
EDIT: I now know and correct me if I am wrong that tree shaking is done by Vercel
to avoid having the css files removed, you can add a "sideEffects" property to your package.json file and define the CSS files you do not want to be removed. For example:
"sideEffects": [
"node_modules/swagger-ui-dist/swagger-ui.css"
]
I am creating a component library where I do not want to have global CSS. Therefore, every component is scoped.
When running the production build via
vue-cli-service build --target lib --name sc components/index.js, everything is compiled into sc.css and dist/css/1.392e001d.css.
If possible, I want to keep the css and/or scss combined with the vue file or js.
The reason I want to do this is to enable users of the library to import a singular component from the library. The users could then use the component anywhere without having to import/include a css file.
If this is not possible, is there a way to accomplish the desired functionality?
From the Vue CLI docs for css.extract:
When building as a library, you can also set this to false to avoid your users having to import the CSS themselves.
// vue.config.js
module.exports = {
css: {
extract: false
}
}
I am making a lib similar to Polymer Material. I have individual files I use rollup to create a single ESM, CJS, and UMD file. The ESM file is the main in the package.json. I have a situation like this
Header
Icon-Button
Icon-Button
The icon button Uses Mustache so I need to include it using the rollup-plugin-node-resolve. I then import the library in Header and create a UMD file that is imported into my we app like this...
// Pug
script(src="/ui-components/header/dist/index.umd.js")
script(src="/ui-components/icon-button/dist/index.umd.js")
// Express
// #me/icon-button
// #me/header
const uiPath = path.join(__dirname, './node_modules/#me');
app.use('/ui-components', express.static(uiPath));
I get the following in the browser console on load...
Failed to execute 'define' on 'CustomElementRegistry': the name "me-icon-button" has already been used with this registry
How do libraries handle this? I thought about removing the resolve plugin for mustache and assuming it is included globally. However, it seems pretty onerous to make everyone find a way to import mustache into window and not something most libraries do. I could also do something like this question suggests...
customElements.get("me-icon-button")||customElements.define("me-icon-button", IconButton, {...});
But having that multiple times in my code does not seem right either.
So How do I include multiple web components that reference other similar components?
How do I set up an environment with parcel where each component has it's own, compartmentalized, SCSS style file that do not interfere with each other (E.G. you can even have the same class names in two files and they won't apply to both elements on your Webapp that use it, each component will receive it's designated one.)
I've seen this done before in an angular 4 project and I know it used to be possible with webpack : https://javascriptplayground.com/css-modules-webpack-react/
but I'd like to accomplish this with parcel instead.
I've followed this guide :
https://www.valentinog.com/blog/tutorial-react-parcel-bundler/
to set up Parcel-React. (for Scss that's just a personal preference I'm already using it since it's ridiculously easy to set up in parcel but this question could just as easily have applied to css)
this oughta do it : https://medium.com/#kswanie21/css-modules-sass-in-create-react-app-37c3152de9
it's a step by step guide using the npm package "css-modules" as well as "node-sass".
Sample app available for download which shows the issue:
https://github.com/chrillewoodz/ng-boilerplate/tree/universal
I'm trying to get angular universal to work but it throws error for a SCSS import in one of the components SCSS files:
#import './src/assets/styles/utils/_exports';
It works when running it normally without universal but when it runs with universal it treats the import as relative to the component and not root.
So the path becomes:
src/app/shared/components/breadcrumbs/src/assets/styles/utils
Instead of:
src/assets/styles/utils
How can I set the path so that it works in both scenarios?
I've done some digging but unable to find similar issues, the only issues that has come up is that SASS doesn't work properly with universal and AOT. Which would be a completely separate issue once I've managed to solve this one.
you have to check from the base which is "" in tsconfig.app.json file, so the path should be relative to this "baseUrl": "", path.if you need your path as "src/assets/styles/utils" you have to change "baseUrl": "/src" of "src/assets/styles/utils".can you please share your tsconfig.app.json as asset is parallel to it or may be your folder structure.As you have to check the your SCSS file relative to asset you want to access.