Troubleshooting: VueJs is unable to locate CSS files using postcss-import in Webpack

Struggling to load CSS files in my VueJs project. I recently integrated the less-loader and sass-loader, both of which are functioning correctly. However, when attempting to add a CSS file within a SASS file or directly in the main.js using import, the file cannot be located.

Here's my current approach:

SASS:

@import "../../../../node_modules/pnotify/dist/PNotifyBrightTheme.css";

or JavaScript:

import 'module/pnotify/dist/PNotifyBrightTheme.css'

webpack.base.config:

resolve: {
  extensions: ['.js', '.vue', '.json', '.css'],
  alias: {
    'vue$': 'vue/dist/vue.esm.js',
    '@': resolve('src'),
    'module': resolve('node_modules')
  }
},
module: {
  rules: [{
    test: /\.css$/,
    use: [
      'style-loader',
      {
        loader: 'css-loader',
        options: { importLoaders: 1 }
      },
      'postcss-loader'
    ]
  }]
}

postcssrc.js file:

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    "autoprefixer": {}
  }
}

Installed modules:

"css-loader": "^0.28.11",
"postcss-load-config": "^1.2.0",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.1.4",
"postcss-url": "^7.2.1",
"style-loader": "^0.21.0",

The library containing the CSS file:

"pnotify": "^4.0.0-alpha.4",

Encountered Exception:

in ./src/assets/scss/index.scss

Module build failed: Error: Failed to find '../../../../node_modules/pnotify/dist/PNotifyBrightTheme.css'
  in [
    /src/assets/scss
  ]
    at resolveModule.catch.catch (/node_modules/postcss-import/lib/resolve-id.js:35:13)
    at <anonymous>

 @ ./src/assets/scss/index.scss 4:14-212 13:3-17:5 14:22-220
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

If anyone has insights on how to resolve this issue, your help would be greatly appreciated. Feeling quite desperate :(

csswebpackvuejs2postcsscss-loader

Answer №1

My extensive research led me to find a solution for the issue I was facing.

  • I resolved the problem by completely uninstalling postcss from npm and removing all related configurations in build/utils.js and build/webpack.base.config.js
  • I decided to keep css-loader and style-loader installed without adding them to the webpack config, as they were already integrated with VueJs. -> https://github.com/webpack-contrib/css-loader/issues/362

The following example code was causing issues with my CSS loadings/imports: In build/utils.js

const cssLoader = {
    loader: 'css-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }

  //remove this
  const postcssLoader = {
    loader: 'postcss-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }

  // generate loader string to be used with extract text plugin
  function generateLoaders (loader, loaderOptions) {
    //change to const loaders = [cssLoader]
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]

    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }
  }
}

I also removed the following code: In webpack config

 {
   test: /\.css$/,
   use: [
     'style-loader',
     {
       loader: 'css-loader',
       options: { importLoaders: 1 }
     },
     'postcss-loader'
   ]
 },

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

String defines the type

I came across the following code snippet in some external sources that I intend to incorporate into my project: const INIT: 'jsonforms/INIT' = 'jsonforms/INIT' Can someone explain what it means to define a type with a string like INIT ...

typescriptwebpack

What are the pros and cons of incorporating ID selectors in CSS?

This article discusses the drawbacks of utilizing ID selectors in CSS. Can you provide more information on the pros and cons of using ID selectors in CSS? In what scenarios should ID selectors be used over class selectors, and vice versa? Thank you. ...

csscss-selectors

The instance does not have a definition for the property or method "names" that is being referenced during rendering

Currently, I'm working on developing a CRUD application using Vue.js and Firebase. However, I've encountered an error that I can't seem to resolve: [Vue warn]: Property or method "names" is not defined on the instance but referenced during r ...

javascriptfirebasefirebase-realtime-databasevuejs2vuefire

Utilize Vue template to retrieve array data using indexes

I'm running into an issue when trying to access data from an array using the index. This is the code snippet in my template: <a href="#" class="...">{{ fixture.flatOdds.data[0].market_id }}</a> However, this results in: TypeError: fi ...

javascriptvue.jsvuejs2

The list marquee in HTML, JS, and CSS is not being properly rendered on

I recently made changes to a code that showcases a marquee scrolling a basic HTML list. Check it out here: I am facing 3 issues that I am struggling to resolve: JS: I want the marquee to continuously show text re-entering from the right just after it ...

javascriptjqueryhtmlcss

Error: The current node version cannot be identified

I've successfully compiled a comprehensive component library using webpack and exported it to a file that I'm now attempting to test within my React application. The webpack output is error-free, but the problem arises when I run npm link and sim ...

reactjstypescriptwebpackbrowser

prevent scrolling to a specific div

Hey, I'm facing a slight issue and need to prevent scrolling to the div after clicking on a link that targets the left div. <div class="kafelki"> <div class="kafelki-img"> <div class="target"> <div id="m1">dasdasdasd m1</di ...

htmlcss

Tips for automatically collapsing the Bootstrap 4 Sidebar on smaller devices

I am currently working on some code and have successfully hidden the sidebar using a collapse button. However, I am looking to make it collapse only for small devices, similar to how the bootstrap navbar functions. <link href="https://stackpath.boots ...

htmlcssbootstrap-4responsivesidebar

A guide to changing the height of a column in Bootstrap

I've utilized Bootstrap to create features in the HTML, and I'm attempting to make each box's height consistent. Check out a screenshot of the boxes here #hr-1 { width: 100px; margin-left: 20%; } #features { background-color: #f0 ...

htmlcssflexboxbootstrap-5

Confusing Vaadin Component Styling Dilemma

I've been struggling to access the individual parts of elements that require navigating through the shadow DOM. I've been following a guide for assistance: https://github.com/vaadin/vaadin-themable-mixin/wiki/1.-Style-Scopes When I add this code ...

javacssvaadinstyling

What is the reason the BODY tag does not supersede the properties of the HTML tag?

After applying this css to my html file: html { background-color: red; } body { background-color: yellow; } The page's background actually turns out to be red instead of yellow. Since the body comes after html in the code, it should override t ...

htmlcsscss-specificity

Modify the transition and design of two progress bars

I'm having an issue with merging two Bootstrap progress bars into one. Initially, the first progress bar appears when the page loads and hides after data is loaded. At the same time, the second progress bar shows up. However, the transition animation ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Div with Sticky Header and Scrolling Ability

I am working on a project that involves creating a scrollable div with "title" elements inside. I want the title element of each section to stick to the top of the div as I scroll, similar to how a menu sticks to the top of a webpage. An example of this ca ...

javascriptjqueryhtmlcss

What is the best way to use HTML and CSS to center images and headings on a webpage?

This task is really testing my patience... I'm attempting to create a layout that resembles the following: Logo img|h1|img The horizontal lines flanking the subtitle serve as a visual guide, like this --- Subtitle --- Below is the snippet of H ...

htmlcsspositionalignmentcenter

The checkbox display and hide functionality is mistakenly inverted

I have a form set up with an input field that should show or hide depending on whether a checkbox is clicked. Currently, the field is showing and hides when the checkbox is clicked. How can I reverse this behavior so that it works the other way around? ...

htmljquerycssbootstrap-4

Clicking a button causes the entire HTML body to shift

My current webpage setup is quite simple, featuring a drop-down menu that appears upon clicking a button. However, when the button is clicked, the drop-down menu suddenly shifts the entire contents of the page. I'm unsure of what's causing this i ...

jqueryhtmlcssbuttondrop-down-menu

How can I modify the background color of a textfield in Ionic?

I've tried to change the background color of the textfield to transparent in Ionic, but it's not working as expected. .item .item-input { background-color: transparent; } Despite consulting the Ionic documentation, the color is still white. ...

cssangularjsionic-framework

Is there a way to adjust the size of a full web page using CSS for scaling?

One handy feature in Firefox is the ability to enlarge an entire web page by pressing CTRL +. This action will proportionally increase the size of the entire webpage, including fonts and images. Is there a way to achieve similar functionality using just C ...

htmlcssresize

Obtain image file paths dynamically in a folder using Nuxt

https://i.sstatic.net/3FKZH.png Incorporating nuxt with vuetify, I have successfully implemented a carousel component. Now, my goal is to generate a list of the .png files located in the static folder. By referencing a tutorial on dynamically importing im ...

javascriptvue.jswebpacknuxt.js

Is there a way to incorporate borders into JqTree?

I attempted the following .jqtree-tree .jqtree-element { border-color: black; border-width: 10px; } It seems that I may be overlooking certain elements to which this CSS should be applied ...

jquerycssjqtree