I am using an vue-cli-service to build a web component. All styles referenced in this component are always inlined into the javascript file.
vue-cli-service build --target wc --name component-name --inline-vue ./src/components/someComponent.vue
Is there a way to force Vue to pull out component CSS into a separate file instead of inlining it into the dist/component-name.js file?
Alternatively, is there an easy way to allow external users to override the Shadow DOM styles?
Unfortunately I don't believe there's an automated way to do this without writing a custom webpack plugin. You're going to have to migrate the CSS manually.
If you're using webpack, you can take all your component CSS and move it into a separate file.
From there, you can include it in your main.js file using either a require or an import:
import './css/styles.css';
If you're not using webpack or you want to include CSS files only in specific components then you can import the file within the component itself.
Simply create a <style> block and import the CSS within it:
<style>
#import './css/styles.css';
</style>
You could use this <style> block approach globally too by adding it to your App.vue file.
I've got a running Vue app created with Vue CLI 4 and also installed Tailwind CSS with the help of this tutorial. Since I want to put my custom components into single files and write them in SCSS, my tailwind config file looks like
// tailwind.scss
#tailwind base;
#tailwind components;
#import '#/assets/scss/components/button.scss';
#tailwind utilities;
While serving the app with vue-cli-service serve or building it with vue-cli-service build works great, I am missing the autocompletion feature of my IntelliJ IDEA for all the tailwind classes so that I don't have to use (even tough great) cheat sheets like this.
My idea is to introduce a npm script that will build the full tailwind.css, so that the IDE can utilize it when autocompleting css classes. I know that I can manually build such file with npx tailwindcss build tailwind.scss -o tailwind.css.
However, although that gives me autocompletion for the built-in tailwind classes, it of course neither compiles the SCSS in my custom components nor does it resolve the #import at all. A solution could be to 1) resolve the #import, 2) compile the SCSS to CSS and 3) use the aforementioned tailwindcss build to finally build the full tailwind.css.
Since I am very inexperienced with Webpack, I wonder if you can give me some hints of how to achieve this. Would you even use Webpack for this task?
Webpack is definitely the way to go here, I use this config all the time. See the Tailwind documentation page for setup documentation with webpack
Don't worry about autocomplete for Tailwind, you will learn those classes in no time plus their docs and search function on there are brilliant, no need for external cheatsheets imho.
If you're using post-cssimport you need to put the #import statement before everything else. Check out https://tailwindcss.com/docs/using-with-preprocessors#build-time-imports
I'm working on a vue.js app. It runs fine in DEV mode, but fails to include / parse my scss while Building (npm run build). I'm using the the Vue PWA template (https://github.com/vuejs-templates/pwa)
My scss is included in the App.vue file like so:
<style lang="scss" src="./styles/app.scss">
I've haven't changed anything in the build/config files.
Should i add my app.scss file as a seperate entry point, I'm quite lost here..|
Thank in advance
Assuming that your node-sass and sass-loader is already setup correctly.
You can use the following way to import your sass file
<style lang="scss">
#import "./path/to/scss"
</style>
I am working on a project where I am developing a set of UI components for developers to use to build out their sites. I have created an NPM package which consists of just the CSS required to implement an Accordion component.
I installed my css-accordion-component as a development dependency via npm install to a React project created using create-react-app. My Accordion.js file in the React project imports the css-accordion package from node_modules like so:
import "css-accordion-component/lib/accordion.css";
This does bring the styles into my project but none of the CSS Variables defined and used in the file are resolving. The CSS file looks like so:
:root {
--Accordion-bgColor: #fff;
};
.Accordion {
background-color: var(--Accordion-bgColor);
}
I believe it may be because the React project built with create-react-app is not running this imported css file through its post-css plugins. There seems to be a lot of out of date advice online about how to correctly configure Webpack to use PostCSS. Any advice would be really great.
:root {
--Accordion-bgColor: #fff;
};
^^ The semi-colon here proved to be the problem. It caused the whole :root block to fail to render.
I have pulled in bulma in my project through :
$ npm install bulma
After that, how can I refer to it in my pages. I really don't know how to work with npm, so please can you guide me. Do I have to refer to it in my js by saying:
import bulma from 'bulma' or require it, I don't know where my files are. That means I don't know where are they located.
You can find the final css build at projectName/node_modules/bulma/css/bulma.css.
Chances are you're using a file loader with webpack and similar. If, for example in a Vue project, you have that, then you can use import syntax:
import 'bulma/css/bulma.css'
within your js. This works because having import [xyz from] 'xyz' will look at projectName/node_modules/xyz, and in the case of a css file, it's as simple as that!
If you do not have that installed, you need to find a way to send it over to the client. Just copy projectName/node_modules/bulma/css/bulma.css into a file, maybe bulma.css, in either an assets or public or whatever you use, then fetch it like you'd fetch any css file within the html: <link rel="stylesheet" href="/bulma.css">
#import "../node_modules/bulma/css/bulma.css";
If you have a main.css file for your project or something similar to that, you can add the above line inside your main.css file. This will import the default bulma.css file located inside your project's path node_modules/bulma/css/ after you have installed bulma via npm.
NOTE: you must include your main.css file( or something similar) inside your index.html as a static import if you chose to go this way.
For that you need to have something like:
<link rel="stylesheet" href="/css/main.css">
I prefer this since bulma is a CSS framework, I think it's best to keep the stylesheets linked with each other.
It's CSS only.
Bulma is a CSS framework.
So you can add it just in your index.html like a normal css link:
<link rel="stylesheet" type="text/css" href="your/bulma/path/bulma.css />
Edit: You have installed bulma through the nodejs environment with the package manager npm so you must have a directory called node_modules and inside the bulma directory.
That is really unevident. If you want to get bulma work with fontawesome5 via npm, minimum working deps (for now) are:
npm i -S bulma #fortawesome/fontawesome #fortawesome/fontawesome-free-solid
then needed to be initialized like this:
import fontawesome from '#fortawesome/fontawesome'
import solid from '#fortawesome/fontawesome-free-solid'
import 'bulma/css/bulma.css'
fontawesome.library.add(solid)
More details can be found here: https://fontawesome.com/how-to-use/use-with-node-js
I had the same issue in Vue and in the end I solved it thanks to this link. For Bulma you just need to run:
$ npm install bulma
After npm install, your files should be located under node_modules folder.
For Bulma, check that you have a folder bulma under node_modules, then you can import bulma css framework in your main.js file as follows: import "./../node_modules/bulma/css/bulma.css";
Note: even if on the link I provided they suggest the full path to bulma this is not a good practice as #Omkar pointed out, so I ended up importing bulma as follows: import "bulma/css/bulma.css";
Alternative Answer: CSS Preprocessing
I'm posting a somewhat indirect way to answer the question. I came here looking to see how I could use rendered SASS in my main app.js (in my case, for use in a pug.js template).
The answer is: use a CSS pre-processor. In this minimal example, I'll use node-sass.
0. Install:
npm install node-sass
npm install bulma
1. Create an inherited style
mystyles.scss:
#charset "utf-8";
#import "node_modules/bulma/bulma.sass"; // <--- Check and make sure this file is here after installing Bulma
This will inherit styles from the Bulma installation, but override those styles with what you place here.
2. Build the CSS
app.js:
const nsass = require("node-sass");
const rendered_style = nsass.renderSync({ // <---- This call is synchronous!
file: "./mystyles.scss",
});
Here, node-sass is processing the .scss file into a Result object that has CSS buffer. Note that node-sass has an asynchronous call (sass.render()) as well, if needed.
3. Use the CSS
The buffer containing the CSS is now available at rendered_style.css
console.write(rendered_style.css)
--Notes--
The benefit of the SASS approach is that it unlocks Customization, which is what makes Bulma powerful!
Keep in mind that if app.js is your entry point, the CSS will be rendered every time you run the server. If your styles aren't changing frequently, it may be best to write it out to a file. You can see more on this approach in the Bulma Documenation I adapted this from.
declaring this in the index.html file worked for me.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.0/css/bulma.min.css">
In React, we have to declare this in the same html file where the root of the app is present.