How to import css file from assets folder in nuxt.js - css

<template>
<div class="container">
<head>
<link rel="stylesheet" href="~assets/css/style-light.css" />
<link rel="stylesheet" href="~assets/css/login-light.css" />
</head>
</div>
</template>
Importing css like above results in this error
vue.runtime.esm.js:5717 GET http://localhost:3000/~assets/css/login-light.css net::ERR_ABORTED 404 (Not Found)
Is there really no other way loading css other than putting the whole css in the template?

The first thing you need to know is, you can't declare a html head inside any place, neither in yours tamplate, neither in yours components, neither in yours pages, neither in nowhere.
Keep in mind that you can't use a html tags for this, you will use a json schema.
take a look https://nuxtjs.org/guide/configuration for more detailed explanations.
Now about you doubt if you want to import the CSS as globally, the correct place is inside your nuxt.config.js, inside this file, you have a property called head, and inside the head we will configure all the imports.
So, inside nuxt.config.js find your head session, and then create new property called css, some thing like this:
head: {
css: [
'~/assets/style/app.styl',
'~/assets/style/main.css'
],
}
...
Another way, is import your css directly inside your component, for this you can do some thing like this:
<style scoped>
#import '~/assets/style/main.css';
</style>
OR
<style scoped src="#/assets/styles/mystyles.css">
</style>
In Nuxt, you will need a CSS loader instaled in your application too, so have sure you had intalled a "stylus" and "stylus-loader" in your app.

try to impot your css files in script like this :
<script>
import "#/assets/css/style-light.css";
import "#/assets/css/login-light.css";
///
</script>
EDIT: changed ~ to #

You could bring your files in using the head method like so :
head () {
return {
link: [
{ rel: 'stylesheet', href: '/style-light.css' },
{ rel: 'stylesheet', href: '/login-light.css' }
]
}
}
You should also move these css files into the static folder. See this discussion on the Vue forum https://forum.vuejs.org/t/nuxt-import-css-file-and-js-file/42498

Related

Failed to register a Vue component in vuepress2

The main problem is under the after tag. You can ignore the other parts above.
origin
I want to insert a chart (linechart) into my vuepress page.
first
I chose echart, use <script src="echarts.js"></script> to include it in my .md file, But failed.
[vite] Internal server error: Tags with side effect (<script> and <style>) are ignored in client component templates.
It seems that I can't use <script> in it? But I looked up Markdown and Vue SFC , It just says that you should avoid using more than one <script> in VuePress markdown. Does it mean I can use just a single <script> in .md file?
after
I tried to use echart vue component. Followed the tutorial, I just use register-components plugin to register it. These are my config:
.vuepress/config.ts
const { registerComponentsPlugin } = require('#vuepress/plugin-register-components')
const { path } = require('#vuepress/utils')
export default defineUserConfig({
...
plugins: [
...
registerComponentsPlugin({
componentsDir: path.resolve(__dirname, './components')
}),
]
})
.vuepress/components/TestMe.vue
<template>
<h1>Test my component</h1>
</template>
<script>
export default {
}
</script>
<style>
</style>
Isn't it a simplest component for test?
Then I add <TestMe /> to my .md file. But it failed again. The h1 title couldn't show and my web gave out a warning:
to see the warning information
I have no idea about that.

Vue 3 : disable shadow dom while using custom element

I would like to add in a non-vue application a custom element.
For that, I've created a classical SFC :
//test.ce.vue
<template>
<div class="text-primary">Test</div>
</template>
<script>
export default {
name: 'test',
};
</script>
<style>
.text-primary {
color: red;
}
</style>
And then a main script :
//app.js
import Test from 'test.ce.vue';
const testElement = defineCustomElement(Test);
customElements.define('test-element', testElement);
document.body.appendChild(document.createElement('test-element'));
Everything is running normally with the creation of a shadow dom element :
<test-component>
#shadow-root (open)
<style>
.text-primary {
color: red;
}
</style>
<div class="text-primary">Test</div>
</test-component>
I would like to avoid to redefine .text-primary class in the component as this class is already defined in the main css file. I also don't need to define specific classes for this component only, so in other terms, I would like to remove the shadow dom like a classical custom element will do.
So basically, render this :
<test-component>
<div class="text-primary">Test</div>
</test-component>
Is there's any option to define in vue that permit that ?
Older question, but in case someone still needs a solution for this...
there is currently no way to tell Vue not to use the shadow-dom. In Vue 2 there was a official package for creating web-components without shadow-root. And there is a community port for Vue 3 of that:
https://www.npmjs.com/package/vue3-webcomponent-wrapper
It was only meant to help people who have just migrated from Vue 2 to keep there application working. It was never intended to replace the official solution and should only be used until the official package can handle Vue 3.
Unfortunately that never happend.
The community port still works, but the package does not contain any source code, so it is a bit scary to use.
I came up with another solution for our project. Using defineCustomElement on a more complex vue component wich is composed by a bunch of nested components reveals another problem. The css of the child components wont be copied to shadow root. So only the css of the root component will work.
You can find the related issue and a workaround with full example here:
https://github.com/vuejs/core/issues/4662#issuecomment-1116001438
It basically grabs the css from the head and appends it to the shadow root.
You just have to extend it to also copy your main.css, like
<template>
<div id="app" ref="injectionElementRef">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
</div>
</template>
<script lang="ts">
import {defineComponent} from 'vue';
import HelloWorld from './components/HelloWorld.vue';
export default defineComponent({
name: 'App',
components: {
HelloWorld
},
mounted() {
const el = this.$refs.injectionElementRef as HTMLElement
const root = el.getRootNode()
const linkTag = document.getElementById('main-css-id')
root.insertBefore(linkTag.cloneNode(), el)
}
});
</script>
The downside of this method is, there is a short flicker because the css is applied after mount. You could show an empty element till css is applied to work around that.
You are using Vue as a Tool to create Web Components, but why use a Tool over Native Technology?
Tools are not better; Tools are only faster in performing a task.
And in your case the Tool does something you do not want it to do.
Using native Web Components Technology, all you need is:
<style>
.text-primary {
color: red;
}
</style>
<test-component></test-component>
<script>
customElements.define("test-component", class extends HTMLElement {
connectedCallback() {
this.innerHTML = `<div class="text-primary">Test</div>`;
}
})
</script>

How to include local (not global) stylesheet file for each layout in Nuxtjs

Is it possible to import css-files to a separate layout so that styles are applied only to one layout without affecting others?
I found this solution.
Rename ".css" files to ".scss".
In your layout add the wrapper block with custom class "my-class".
layouts/AuthLayout:
<template>
<div class="auth-layout">
<section>
<Nuxt/>
</section>
</div>
</template>
Then add a style section. This uses SCSS features and the v-deep directive.
layouts/AuthLayout:
<style scoped lang="scss">
.auth-layout {
&::v-deep {
#import '~assets/path/to/style.scss';
#import '~assets/path/to/custom.scss';
// ...
}
}
</style>
I hope it would be helpful for somebody.
If your style files have .css extension you can put them on static directory and address in your layout head function or object in this way (my file is in static/css/main.css directory)
return {
link: [
//you shouldn't mention ~/static itself
{ rel: 'stylesheet', href: '/css/main.css' },
],
};
if your file has .scss extension or any other preprocessor you can put it in assets directory cause webpack compile files on this directory.

Next.JS + AMP CSS

I'm having trouble with AMP and CSS in Next.js. In my head component I have:
<Head>
<style amp-custom>{`
// CSS Here
`}</style>
</Head>
In the HTML source it shows up as <style amp-custom=""></style><style>(CSS Here)</style>
In the console I get this error: The mandatory attribute 'amp-custom' is missing in tag 'style amp-custom (transformed)'.
How can I work with AMPHTML's rules on CSS and Next both? Every other method I've tried (such as importing from a file using #zeit/next-sass) causes the CSS to not be rendered at all. This is the only working version I've found.
Try this:
<Head>
<style
amp-custom=""
dangerouslySetInnerHTML={{
__html: `
amp-img {
border: 1px solid black;
}
`,
}}
></style>
</Head>
...It has to be: <style jsx>...</style>. Very dumb mistake that I've been looking for workarounds on all day. :/
As of Sept 2020, I've been having this issue too. I'm new at this, but with no help from the official tutorials. I did find a workaround.
First, I want to point out a couple of things from Next.js that they tell you.
non-AMP page styles are usually placed in _document.js from the next.js example.
</Head>
<style jsx global>{ reset }</style>
<style jsx global>{ globals }</style>
<body>
<Main />
<NextScript />
</body>
They mention in the tutorial to put <style amp-custom>. They don't say where, but it should be within the <Head></Head> of index.js (or whatever .js file for individual pages) OR _document.js for every page.
Ok, sounds good, BUT it's partially wrong!
I will explain what I found it does when turn on amp pages on in Next.JS.
So on an individual page, such as index.js, you need to this code at the top:
export const config = {
amp: true,
}
Then you have to put this in the return function:
const isAmp = useAmp()
Standard instructions from the tutorial. Now AMP is turned on, here's what happens:
Anything in <style amp-custom> is turned into a <style>
anything that is in <style jsx> is turned into a <style amp-custom> tag.
In addition to #2, it injects a unique random index that ruins any css code in that gets put into the generated <style amp-custom> tag.
<style amp-custom>.jsx-2373233908{/* your CSS code that you put in <style jsx> from before */}</style>
and that .jsx-########### throws a "/ error CSS syntax error in tag 'style amp-custom' - incomplete declaration." when you try to compile.
Is this opposite and odd behavior. YES. I don't get why it does it, but I'm a newb.
So my workaround goes like this:
Install your CSS framework package or put your CSS file into the styles folder (let's say located at : ./styles/styles.css)
I also add raw loader from your terminal window. Because I like to put my css in a file, not type it inlined with the code. Let's be realistic, you're going to separate CSS and you'll need to load that file in.
npm install raw-loader --save-dev
Load the CSS in your _document.js (here's my whole _document.js). I use "}" and "{" with fixCSS to escape the .jsx-########### and the injected code magically disappears.
import Document, { Html, Head, Main, NextScript } from 'next/document'
import styleCSS from '!!raw-loader!../styles/styles.css';
const fixCSS = `}${styleCSS}{`;
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
}
render() {
return (
<Html lang="en">
<Head>
</Head>
<style jsx>{`
${fixCSS}
` }</style>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocument
That's it. Now your imported CSS is shown on AMP pages. Remember this is for sept 2020 using these packages in my package.json:
"dependencies": {
"amp": "^0.3.1",
"next": "^9.5.3-canary.25",
"next-env": "^1.1.1",
"react": "^16.13.1",
"react-dom": "^16.13.1"
},
"devDependencies": {
"cssnano": "^4.1.10",
"now": "^19.2.0",
"raw-loader": "^4.0.1"
},
Try:
<style jsx amp-custom>
`
... my css
`
</style>
I just tested it out and it worked okay. Not the best approach, NextJS should document the ways to add css in somewhere.
This worked:
const ampStyle = `h1{color:red;}`
<style jsx>{ampStyle}</style>

Webpack-React with server-side-rendering: linking to css file in server template with hash name

I'm preparing a starter for react from scratch, here is the code: https://github.com/antondc/react-starter
I managed to set up bundling for client and server, with css modules and less, and now I'm with server side rendering. I'm doing that with a js template:
// src/server/views/index.ejs
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>INDEX.EJS</title>
<link rel="stylesheet" type="text/css" href="assets/index.css">
</head>
<body>
<div id="app"></div>
<script src="/assets/bundle.js"></script>
</body>
</html>
As you see, the link to the css file is harcoded there. But in my Webpack configuration I have this file name hashed, because I want to prevent caching from browsers when I update the code on development.
I am wondering how can I link the css file there. Now in the template I have href="assets/index.css, but the css file is in /dist/assets/d47e.css.
It would be great if would be possible to do something like href="assets/*.css, but is not possible, so what is the common approach for a problem like this one?
Thanks!
It depends.
Step 1: Get the current asset name
To get the current name of the generated webpack css/js files, you can use the assets-webpack-plugin. This will (with default config) generate an assets.json file in your output folder with essentially this structure:
{
"bundle_name": {
"asset_kind": "/public/path/to/asset"
}
}
Step 2a: Your html is rendered from a template (pug/jade/what ever)
// in your render code
const assets = require('<webpack-output-folder>/assets.json');
// ...
res.render('template', {
scripts: [{src: `${WEBPACK_PUBLIC_PATH}/${assets.myEntryPointName.js}` }],
links: [{href: `${WEBPACK_PUBLIC_PATH}/${assets.myEntryPointName.css}` rel: 'stylesheet' }],
});
// in your template (example for pug)
// ...
each link in links
link(rel=link.rel href=link.href)
// ...
each script in scripts
script(src=script.src)
// ...
Step 2b: Your html is static
You need to update the html (using a script) with the information from the asset.json file. This script needs to be run after webpack. Something like
const assets = require('<webpack-output-folder>/assets.json');
const fs = require('fs');
const css = /assets\/[a-z0-9]*\.css/i;
const js = /assets\/[a-z0-9]*\.js/i;
fs.readFile('<yourhtml>.html', (err, data) => {
// ... (error handling)
const updatedCss = data.replace(css, assets.myEntryPointName.css);
const updatedJs = updatedCss.replace(js, assets.myEntryPointName.js);
fs.writeFile('<yourhtml>.html', updated, (err) => {
// ... (error handling)
});
});
You can use HTMLWebpackPlugin to generate an HTML file that will have your JS and CSS output inserted.

Resources