Having trouble with Vue.js 2.5+ and Webpack 4+ not loading CSS files?

I am currently in the process of setting up a Vue project with webpack 4 enabled using the Microsoft SPA templates dotnet core as the base. Everything seems to be working fine, except for the fact that external CSS files are not loading into the project. I have been trying to figure out why these CSS files are not being loaded for quite some time.

Initially, I used 'dotnet new vue' (make sure you have the Microsoft SPA templates installed) and upon project creation, I began updating the packages. Here is my current package.json file:

{ 
  "name": "Dashboard",
  "private": true,
  "version": "0.0.1",
  "scripts": {
    "build:development": "webpack"
  },
  "devDependencies": {
    ...
  },
  "dependencies": {}
}

Here is my webpack.config.file:

const path = require('path');
const webpack = require('webpack');
...

module.exports = {
    ...
};

I have tried including the CSS file in various ways such as in app.ts and boot.ts, but the CSS file is still not being utilized in the frontend. I have also experimented with different approaches in the webpack.config file including using the extract-text-webpack-plugin.

The main objective is to upgrade the old versions of packages being used in the Microsoft SPA template to the latest versions as it is currently based on Webpack 2.

If anyone has any suggestions or solutions, I would greatly appreciate the help. Thank you! :-)

csswebpackvue.js.net-core

Answer №1

It finally clicked for me. It seems that webpack 4 is not able to detect CSS files on its own. To resolve this issue, you must install the MiniCssExtractPlugin first:

MiniCssExtractPlugin

Next, include the following configuration in your webpack settings:

    { 
        test: /\.(s*)[a|c]ss$/,
        use: [
            "vue-style-loader",
            MiniCssExtractPlugin.loader,
            "css-loader",
            "sass-loader"
        ]
    }

Don't forget to add the MiniCssExtractPlugin to the plugins section as well:

new MiniCssExtractPlugin({
    filename: "[name].css"
})

With these changes, everything should work smoothly!

Answer №2

To include external CSS files in your main.vue or any vue page, you can use the @import rule inside the style section.

<style>
@import "https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css";
@import "../assests/css/style.css"
</style>

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

Create a copy of an element without altering the original

Currently, I am attempting to create a duplicate of a class and ensure that it remains unaffected when the original is altered. So far, I have tried: $(".newclass").addClass("oldclass"); However, this method does not copy the content. var _elementClone ...

javascriptjqueryhtmlcss

Switch the design and save it in the browser's cache

Exploring the possibility of having two themes, "dark" and "light," that toggle when a checkbox is clicked. To implement the theme change, I used the following JavaScript code: document.documentElement.setAttribute('data-theme', 'dark&apos ...

javascriptcsslocal-storage

What is the best way to change styles in CSS for parent and child elements using selectors?

Hey there! I am currently working on customizing the navigation menus in WordPress and here is the HTML code for the navigation menus: <nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation"> <h1 class="menu- ...

csswordpresscss-selectors

Enhancing the visual appeal of a javascript canvas animation

I am facing a small issue and I want to incorporate an animation from: http://codepen.io/chuckeles/pen/mJeaNJ My main query is how can I modify it so that instead of dots, there would be small images? Which part of the code should I edit for this purpose? ...

javascriptjqueryhtmlcsscanvas

Automatically scroll to the end of the data retrieved through ajax

I am currently developing a live chat website for my users and I am using ajax to fetch the chat messages. However, I am facing an issue where whenever I enter a new message, it does get added to the database and displayed, but the scroll doesn't auto ...

javascriptjquerycssajax

Is it possible to utilize the System.import or import() function for any JavaScript file, or is it restricted to single module-specific files?

After reading an intriguing article about the concept of dynamic component loading: I am interested in learning more about the use of System.import. The author demonstrates a specific syntax for loading the JavaScript file of the module that needs to be d ...

javascriptangulartypescriptwebpackng-modules

What is the best way to make the final character in the input placeholder appear in red?

Here lies my input field https://i.sstatic.net/0mJyJt.png, I'm striving to make the last character '*' appear in bold red rather than blending into the background. Despite numerous attempts, I haven't been successful in achieving the d ...

csssass

Vue: event triggers malfunctioning and components unresponsive

I am new to Vue.js and I'm attempting to trigger an event from my grand-child component (card) to the child component (hand) and then to the parent component (main): card (emit play event) => hand (listen for play event and emit card-play event) ...

javascriptvue.js

When using Owl Carousel in Chrome, the carousel unexpectedly stops after switching tabs

Hi there, I'm currently testing out the auto play feature in owl carousel. One issue I've encountered is that when I switch to another tab in Chrome and then return to my webpage with the carousel, it stops functioning unless I manually drag the ...

javascriptjqueryhtmlcssowl-carousel

Vue.js integration causes Bootstrap modals to stop functioning properly

Recently, my coworker integrated Vue.js into our codebase which still heavily relies on jQuery. A major issue we encountered was that all the modals in our application would not display when triggered using JavaScript. What made things even more puzzling ...

jqueryvue.jsbootstrap-4bootstrap-modal

Display a custom toast from a list using Bootstrap 5

I've been utilizing the toast feature from Bootstrap, and it works perfectly when displaying a single toast. However, I encountered an issue when trying to display a specific toast, like an error toast, from a list of predefined toasts. It ended up sh ...

csstoastbootstrap-5

A newline within the source code that does not display as a space when rendered

Written in Chinese, I have a lengthy paragraph that lacks spaces as the language's punctuation automatically creates spacing. The issue arises when inputting this paragraph into VSCode - there's no seamless way to incorporate line breaks in the s ...

htmlcss

"Unlocking the potential of vselect in Vue.js: mastering the art of rendering elements in a

I have a Vue.js form with select drop-downs, and I am attempting to utilize the library to achieve this. According to the documentation, I need to pass an array into it, and I'm using an axios method to fetch the options for the drop-downs. The data ...

javascriptvue.jsvuejs2

What are the best ways to resolve the warning from webpack in Express?

I have set up webpack to bundle both the server and client side code... Below is my webpack configuration: const webpack = require('webpack'); const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin&a ...

javascriptangularwebpack

Problem encountered when trying to use the sharp package in NuxtJS

I attempted to implement this code in my Nuxt project, but it encountered an issue during compilation. Within my plugin/sharp.js file: import vue from "vue" import sharp from "sharp" vue.use(sharp) And in my nuxt.config.js file: plugi ...

javascriptnode.jsvue.jsnuxt.js

Verifying the Presence of a Custom index.js File in Webpack

My directory structure is organized like this: src/ MyComponent1/ index.js index.custom.js MyComponent2/ index.js The index.js and index.custom.js files in the MyComponent1 folder each have different implementations of MyComponent1. I wa ...

reactjswebpack

The Chrome extension takes control of the new tab feature by redirecting it to a custom newtab.html

I have a website https://example.com where users can adjust their site preferences, including enabling night mode. To enhance the user experience, I developed a Chrome extension for https://example.com that transforms Chrome's new tab with a custom ne ...

javascripthtmlcsscookiesgoogle-chrome-extension

Increment and decrement the like count on fa-heart multiple times

Is there a way to increment the count of a fa-heart value on click and decrement it on the second click? The issue I'm facing is that I have multiple fa-heart elements on the same page, making it challenging to increment or decrement the clicked fa-h ...

javascriptjqueryhtmlcssonclick

Customizing BootstrapVue styles by overriding default Bootstrap styles: encountering an error due to undefined variable

I recently set up a new Vue application and integrated Bootstrap-Vue for styling, but I'm encountering difficulties when trying to customize Bootstrap's default style. Error message: [sass] Undefined variable. 11 │ $b-custom-control-indicator- ...

vue.jsbootstrap-4bootstrap-vue

Ways to align one child to the end without affecting any other elements

I'm attempting to position only div3 at the flex-end of .app. If I use this code: .app { display: flex; flex-direction: column; height: 100vh; justify-content: flex-end; } Div3 goes where I want it, but everything else also moves dow ...

htmlcss