Why hasn't the styles folder been generated in Nuxt 3?

After running the command "npx nuxi generate," the css folder does not seem to be created in the static site. What could be the issue?

package.json:

    {
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.12",
    "eslint": "^8.23.1",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-plugin-import": "^2.26.0",
    "nuxt": "^3.0.0-rc.11",
    "postcss": "^8.4.16",
    "postcss-import": "^15.0.0",
    "postcss-nested": "^5.0.6",
    "tailwindcss": "^3.1.8"
  }
}

nuxt.config.ts:

export default defineNuxtConfig({
  target: "static",
  build: {
    postcss: {
      postcssOptions: {
        plugins: {
          "postcss-import": {},
          "tailwindcss/nesting": {},
          "postcss-nested": {},
          autoprefixer: {},
          tailwindcss: {},
        },
      },
    },
  },
});

app.vue file:

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

<script setup>
useHead({
  htmlAttrs: {
    lang: "ru",
  },
  link: [
    { rel: "stylesheet", type: "text/css", href: "~/assets/css/app.css" },
    { rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
  ],
});
</script>

output folder screenshot

How can I ensure that a folder with css files is created during compilation?

javascriptvue.jsnuxt.jsvuejs3nuxt3.js

Answer №1

Nuxt 3 offers a simple setup to begin with, allowing you to easily add folders later as you progress further in your project. When it comes to styles, you can create a folder with your desired name and then designate its main entry in the configuration file:

+styles
|__index.css

Inside the nuxt.config.ts file:

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  head: {
     ....
  
  },
  css: ["@/styles/index.css"],
  ...
})

Answer №2

Grasping the Issue

Nuxt lacks awareness of your intention to include the file in the build process, as it is simply being referenced as a basic JavaScript string.

Possible Resolutions

1. Relocating your styles from /assets to /public

While files in the /assets directory are only included in the build when specifically referenced, placing them in the /public directory guarantees their automatic inclusion in the build process.

2. Introducing a Reference in the nuxt.config

An alternative solution involves adding a reference to the desired CSS file that you wish to include in the build, as demonstrated below:

export default defineNuxtConfig({
  css: ["~/assets/css/app.css"],
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to retrieve the list of files from a static public folder using javascript?

I have successfully set up a public folder directory using express and node. For instance, this code works perfectly - var testImage = new Image(); testImage.src = '/images/png/avatar.png'; However, I need to access several images stored ins ...

javascriptfileexpressdirectory

Is there a way in React JS to attempt a function multiple times using try/catch?

I wrote a function with try catch inside where I make a call to an API for a response. The response returns a Result object with some data. Occasionally, I need to retry the function if certain conditions are met, such as having no name but having a bundle ...

javascriptreactjstry-catch

Combining arrays of objects sharing a common key yet varying in structure

Currently, I am facing a challenge while working on this problem using Typescript. It has been quite some time since I started working on it and I am hoping that the helpful community at StackOverflow could provide assistance :) The scenario involves two ...

javascriptarraystypescriptobject

Why do I continue to encounter the error message saying 'jQuery is not defined'?

As a newcomer to the world of jQuery and Visual Studio Environment, I embarked on the journey of creating a circular navigation menu bar following the instructions provided in this link. Despite my efforts, I encountered a hurdle in the head section where ...

javascriptjqueryhtmlcssjquery-ui

A guide on breaking down a URL string containing parameters into an array with the help of JavaScript

I need help splitting a long string into an array with specific index structure like this: fname=bill&mname=&lname=jones&addr1=This%20House&... I am looking to have the array set up as shown below: myarray[0][0] = fname myarray[0][1] = b ...

javascriptarraysmultidimensional-array

The issue arises when an AngularJS directive fails to recognize the controller's scope due to binding variables using "this"

In my setup, I have an angularJS controller as well as a directive that work together: angular.module('twitterApp', []) .controller('AppCtrl', AppCtrl) .directive('enter', EnterFunc); function AppCtrl($scope) { $ ...

javascriptangularjscontrollerscopedirective

Obtaining and storing multiple checkbox selections in a database using a JSP page

If users are required to input data on the first page, such as City, Country, and URL of the destination, and they need to select the type of destination from options like Winter, Christmas, and Summer (max 2 selections), how can these results be connected ...

javascriptjavahtmlmysqljsp

Using the useRef hook to target a particular input element for focus among a group of multiple inputs

I'm currently working with React and facing an issue where the child components lose focus on input fields every time they are re-rendered within the parent component. I update some state when the input is changed, but the focus is lost in the process ...

javascriptreactjstypescriptreact-hooks

Is it possible to implement sticky sessions with Node.js and pm2?

Can sticky sessions be implemented using the pm2 node module? Although not supported by Node.js's internal cluster module on purpose, it could still prove beneficial in scenarios like paused media streams. ...

javascriptnode.jssessionstickypm2

Implementing multiple modules within a shared parent route in Angular

Currently, I am seeking a method to load multiple modules under the same path in Angular. Let's say I have three modules: AModule, BModule, and CModule, each with its own RouterModule.forChild call. My goal is to combine these modules under the route ...

javascriptangularmodulerouter

Issue with Chrome extension's popup not displaying

I was developing a chrome extension, but I encountered an issue where the popup does not display when clicking on the icon. After researching online, I found suggestions to change page_action to browser_action. However, even after making this adjustment, ...

javascriptjsongoogle-chrome-extension

Troubleshooting issues with hint functionality and fullscreen mode in CodeMirror within a jQuery layout

I have integrated the codeMirror library into the UI Layout Plug-in on my website. Challenges: When using CodeMirror within the layout, the Full Screen Editing feature does not work as intended. Press F-11 to zoom in and Esc to exit full screen mode. I ...

javascriptjqueryhtmlcodemirror

Feeling lost when it comes to forms and hitting that submit button?

Below is a sample form structure: <html> <head> <title>My Page</title> </head> <body> <form name="myform" action="http://www.abcdefg.com/my.cgi" method="POST"> <div align="center"> <br><br; <br& ...

javascripthtmlcss

Provide Chai/Mocha with a selection of essential keys that need to be incorporated

It appears that running the following code: describe( 'Add Youtube', function () { it( 'should return the video data, including user, title and content fields', function ( done ) { this.timeout( 5000 ) request({ ...

javascriptnode.jsunit-testingmocha.jschai

Having trouble utilizing props with Vue axios? Running into an undefined error? Unsure how to properly use props with axios?

https://i.stack.imgur.com/QfCDG.png There seems to be an issue with my saveComment() function in CommentList.vue. It can't find the comments' post_id and causes this error: CommentList.vue?6c27:107 Uncaught TypeError: Cannot read properties of u ...

javascriptlaravelvue.js

Leveraging jQuery.ajaxSetup for customizing beforeSend function and modifying outgoing data for AJAX requests

My goal is to develop a universal beforeSend function that modifies the data sent by each jQuery.ajax call. This will allow me to include a custom variable for tracking purposes in every request, regardless of the order they are sent in. For instance, let ...

javascriptjqueryajax

Suspend features for moving between pages in history

In the application, we have two main pages - Home.vue and Statistics.vue. The Home.vue page renders the TableFields.vue component. On the Home page, there are fields with numbers that have an initial value of "3" set upon page load. An interval running a c ...

javascriptvue.jsvue-router

Retrieving information from a JSON file and displaying it in an HTML table through an asynchronous

I need to retrieve data from a server and display it in an HTML table. The server contains an array of weather forecast information as shown below. [{"date":"19\/08\/2020","weather":"Sunny","temperatur ...

javascriptarraysajax

How to allow users to input strings on web pages with JavaScript

I created a Language Translator using java script that currently translates hardcoded strings in an HTML page. I want to enhance its flexibility by allowing users to input a string into a textbox/textarea for translation. Any assistance would be greatly a ...

javascripthtml

What steps should I take to resolve the issue with the Error: spawn php-cgi ENOENT?

My current setup involves Nuxt with php-express, and I've been troubleshooting a persistent error in my php script for hours without success. *server.cjs : * const express = require("express"); const expressPhp = require("express-php&q ...

phpnode.jsexpressnuxt.js