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
}
}
Related
I am new to Tailwind CSS but there is something that confuses me.
Let's run a scenario:
Team A
builds a UI component library using TailwindCSS (Button, Forms, Dialog, etc)
publish NPM package where exports index.ts and theme/tailwind.css
Team B
npm install Team A library. Imports theme/tailwind.css into their application main.ts (entry point).
At this point, their main.ts should have
import { Button } from '#team-a/ui`
import '#team-a/ui/theme/tailwind.css` // tailwind classes coming from Team A
import `./theme/main.css` // tailwind CSS global file belonging to Team B
At this point in time, in the <style> tags in the head, we will have classes brought from Team A and Team B, polluting the same global namespace.
How do you get around this issue?
There a few ways to avoid this, but if both teams uses tailwind there should not be any issue. unless you have custom CSS that for example overrides custom properties at the :root.
Regardless here a few ways to avoid clashing CSS styles.
use #layers,
Scope the CSS to apply only to a specific tag and below. This is a tricky one, usually frameworks will handle that, react with CSS modules, angular with view encapsulation, but it is possible with postcss or sass.
Prefix the tailwind config with each team unique string, if they build separated tailwind output CSS.
I am trying to essentially embed a Vue component into another one from a remote source (npm), without using a Vue Plugin. The components are mounting as expected, however, because the embedded component uses Vuetify, it's style is polluting the style of the "parent" application Here's some images that hopefully illustrate what i mean:
Note the primary colors of the root application before mounting the embedded component
Upon mounting of the Login (embedded) component:
I tried the strategy mentioned here, using less in the embedded component to import the vuetify css at a block level, but it doesn't seem to be working for me.
I realize that, in the end, I could ultimately solve this by ensuring the embedded theme matches the root applications theme, but I'd rather not have to rely on that. If my component is being built with webpack, why am I unable to apply Vuetify's css to just that component? Any suggestions?
happy to include code if necessary
To use with vue.js install postcss-parent-selector
npm i postcss-parent-selector -D
then create a postcss.config.js file in root and add following code
module.exports = {
plugins: [
require("postcss-parent-selector")({
selector: ".mywrapperclass",
}),
],
};
Then in public/index.html add a wrapper element around the app:
<div class="mywrapperclass">
<div id="app"></div>
</div>
Some links:
https://vue-loader-v14.vuejs.org/en/features/postcss.html
https://www.npmjs.com/package/postcss-parent-selector
https://github.com/postcss/postcss
I am currently having the same issue with my application. The possible solutions I've came up with are:
-Embedding the child Vue application via iframe and using a library like vuex-iframe-sync to pass props between Vuetify root app and the child app.
-Disabling Vuetify theme alltogether and perhaps customize components on my own:
// src/plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
const vuetify = new Vuetify({
theme: { disable: true },
})
-Another option was using webpack config to run a PostCSS plugin and possibly add prefixes to Vuetify's global styles while bundling the app, but I couldn't figure out how.
Please let me know if you make any progress on this topic!
I divided my Angular 6 Project in many modules. Those modules reference a ui module containing all the style sheets (SASS) as values e.g.
$primary-text-color: #dde7ff !default;
The reason for this is reusability of the modules. After building one of those modules the stylesheets are already part of the *.js files. Everything is CSS and and the scss values doesn't exist anymore.
However, this approach doesn't allow the consumer to theme or change the values e.g. colors or fonts of the components inside the module afterwards.
My objective is to allow the consumer to:
create a new angular-cli project
define own global style variables like $primary-text-color: #dddddd !default; and therefore overwrite the mentioned variables
referencing existing modules
build the application.
The expected result would be an application with the look/theme of the consumers new style. With this approach the consumer wouldn't be forced to style each component manually.
To achieve this would it be possible to:
create angular-cli libraries without compiling the ts files and rendering the stylesheets? This would be just a bundle of the original files, but in a library. In this case the reference to the variables still exist and could be overwritten.
Style the components in the module with global stylesheets afterwards?
You can't really bundle your code without building it.
But, maybe there is a workaround for what you trying to achieve.
you can create an InjectionToken with the theming option.
Let say:
export interface Theming{
color: string;
}
const THEMING_CONFIG : InjectionToken<Theming> = new InjectionToken<Theming>('Theming Config');
Now, in your lib Module:
#NgModule()
....
export class UIModule{
static init(config: Theming): ModuleWithProviders {
return {
ngModule: UIModule,
providers: [{provide: THEMING_CONFIG, useValue: config}]
}
}
}
Now in each and every component in your lib you can inject the InjectionToken and use it in to style the elements (ngStyle?)
The usage of the lib for the end-user will be:
#NgModule
...
export class AppModule {
imports: [..., UIModule.init(USER_COLOR_HERE)]
}
I want to publish a ui library using react. But I'm confuse about how to deal with styles.
For example, if I write code in a project.I will using webpack && babel to build my code, and it will create a *.css file.
import React from 'react';
import './index.less';
export default function() {
return (
<div>
123
</div>
)
}
But, if I just write react compoents, I will use babel to compile my code.There is not css-loader to deail with *.less file. And after compiling, there is requre('./index.less') in the code, but it can't find file. So if I still want to write my code like above, how can I to publish this comonents with *.css.
Have you looked into available options there are around styling components in React? Because there are a lot of options here and it comes down to what you prefer. Just a quick google search will give you many options.
My personal favorite package to use is the styled-components one.
I am trying to set up the conjunction of Atom editor, Sass, Typescript and Aurelia. This question is about Aurelia (installed via aurelia-cli) and its building system, I guess.
Well, I wrote style.sass for my component, then I required it in the component's view (app.html, for instance) as style.css. Fine, it works. But the content of compiled style.css gets included in index.html as internal styles, I mean everything goes inside <style>-tag, not through <link>. Also it seems that the corresponding .css file is never created at all. The stream just includes its content right in <style>-tag inside index.html.
How could I make Aurelia include my styles as external styles via <link>? In building task the last action is a build-plugin coming from aurelia-cli which is kinda black-box for me. Also aurelia.json is imported, so there should be a way to configure the needed behavior. A quick search didn't give me the answer, so here I am.
This is probably not the best solution, and not completely what you want, but perhaps it helps. You can do the following (I took a new TypeScript project):
First remove the css includes from your views.
Then, adjust the ./aurelia_project/tasks/process-css.ts task as follows:
import * as gulp from 'gulp';
import * as sourcemaps from 'gulp-sourcemaps';
import * as sass from 'gulp-sass';
import * as project from '../aurelia.json';
import {build} from 'aurelia-cli';
export default function processCSS() {
return gulp.src(project.cssProcessor.source)
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest(project.platform.output));
};
This will output CSS files in the ./scripts folder. Then, adjust the aurelia_project/aurelia.json file as follows (remove css):
{
"name": "app-bundle.js",
"source": [
"[**/*.js]",
"**/*.{html}"
]
},
In your index.html you can now include the generated styles (or even in your components views).