Using VueJS to integrate a CSS file into a minified CSS bundle in webpack

I am working on a project with Vue.js and I want to add my personal CSS files to the minified CSS file that is generated from the styles in *.vue files.

In my App.vue file, I have:

<style lang="scss">
  @import '/static/css/AdminLTE.min.css';
  @import '/static/css/style.css';
  @import '/static/js/plugins/pace/pace.min.css';
</style>

Additionally, I am using ExtractTextPlugin to extract and minify styles in *.vue files:

// Extract css into its own file
    new ExtractTextPlugin({
      filename: utils.assetsPath('css/[name].[contenthash].css')
    }),
    // Compress extracted CSS. This plugin helps dedupe possible duplicated CSS from different components.
    new OptimizeCSSPlugin({
      cssProcessorOptions: {
        safe: true
      }
    }),

Currently, my website includes the app.contenthash.css file generated by the plugin, as well as the three files I imported. However, I am wondering if there is a way to include my three imported files directly into the app's CSS file?

Thank you!

Answer №1

Documentation:

Related inquiries: Vue.js + Webpack multiple style tas output | how to extract vue files style into one separate style.css file

Remember to specify a single filename in the ExtractTextPlugin configuration

new ExtractTextPlugin("style.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

Steps to show the chosen index value in an alert pop-up using Ionic 2 framework

I'm in the process of trying to showcase a selected index value within an Ionic 2 alert box. However, I'm struggling to find the correct method to display it in the Ionic prompt. This pertains to the home.ts import { Component } from '@ang ...

CSS accordion causing radio button to malfunction

I am encountering an issue with a radio button placed inside a css accordion. It seems like the styling from the accordion might be causing interference with the functionality of the radio button. Additionally, as the accordion is constructed using a check ...

The registration form's captcha did not prevent the submission of incorrect captchas

This is a PHP register.php page <?php require_once 'config.php'; ?> <?php if(!empty($_POST)){ try { $user_obj = new Cl_User(); $data = $user_obj->registration( $_POST ); if($data)$succ ...

Interacting with icons using TouchableOpacity and onPress functionality

I am attempting to implement onPress functionality for icons using TouchableOpacity. However, when I click on the icon, nothing happens and there are no console logs displayed. I have also tried enclosing the icon within an additional View, but that appro ...

Tips for locating the XPath to select an image with matching names

Could someone provide me with the XPath to click on the image <img> associated with "TM100" mentioned in the td tag? I am having difficulty selecting the image because they all have the same xpath. <tr> <td> <div id='xxx' c ...

Locating the value of a data attribute from a distant parent div using jQuery

How can I access the closest div from an anchor tag that has a data-id attribute without using multiple parent() methods? Even though .parent().parent().parent() works, I am trying to find a better solution. <div class="panel panel-default" data-id="@ ...

Why is Component scope not binding in AngularJS?

I encountered a problem and have set up a JSFiddle to showcase var myApp = angular.module("myApp", []); myApp.component("bar", { transclude: true, template: '<div ng-transclude></div>', controller: function ($scope, $elem ...

In Safari, the iPhone navigation bar is covering the buttons

My unique style controls the navigation buttons on the lower part of the screen, but unfortunately, the buttons are overlapping as shown in the screenshot. #navbar_mobile_extra_links { position: fixed; left: 0; right: 0; bottom: 0; back ...

Update the color of a span in JQuery when its value equals 0

Currently, my goal is to update the color of a span tag only if its value is 0. I attempted to achieve this with the following code: $('span.number:contains("0")').css('color', '#C1C1C1'); However, this code also changes the ...

Enhancing user registration with Bootstrap 4 validation, ensuring password confirmation and disabling submit button until form is successfully validated

There are 3 input fields in a simple form, each with its own regex pattern. The 'Password' and 'Confirm Password' fields must match. If they don't, a message "Not Matching" is displayed. If they do, "Valid" is displayed. I am tr ...

Ionic timer binding issue: troubleshooting tips

Recently, I developed a stopwatch factory service that primarily focuses on running. Please disregard the reset and other functionalities as they are not yet implemented. Despite setting up $scope.time to capture timer changes, it doesn't seem to upd ...

Where is the best place to import Bootstrap in my SCSS file when customizing it with Sass?

When attempting to customize bootstrap using Sass, I discovered that overriding default bootstrap variables can be quite confusing. I am curious if someone could provide an explanation for the inconsistent behavior. Some variables only seem to be overridd ...

Tips for executing a callback function when triggering a "click" event in jQuery?

Having trouble triggering a custom event in the callback of a trigger call. Attempted solutions: var $input = $( ".ui-popup-container" ).find( "input" ).eq(2); function runtests () { console.log("clicked the input"); }; $input.trigger('click&ap ...

Bug in Angular: CSS encapsulation issue causing sibling grid components to inherit :hover styling from one another

Can anyone help me find the bug in my code? I am struggling to identify it. I have a grid container component that contains child grid item components generated by *ngFor. Each child component has two inputs: An object named rfpDoc featured: Boolean (I&a ...

D3 - Rounded edge chart width

Currently facing an issue with the chart where the data value is small, resulting in an 'ear' effect. Can anyone help me with this problem? Below is the code I am currently using: const rx = 30; const ry = 30; svg ...

Image control failing to display SVG file

I am facing an issue with displaying an SVG file on the img control in angular10. When I try to use SVG, it's not showing up but it works fine when I change the file type to jpg for the same control. The img control is placed inside a nav bar. Here i ...

What is the best way to replace "NaN" with a blank space within an array?

How can I replace "NaN" with a space in an array? let numbers = [1, 2, 3, NaN]; let result = numbers.map(num => isNaN(num) ? " " : num); console.log(result); I would like the output to be [1, 2, 3, " "] ...

React component not displaying dynamic content when extending from a class

Hey guys, I'm a newbie when it comes to React and I've encountered a problem with loading content fetched from an API. Usually, I use export default function About({ posts }) which works like a charm in loading my content. However, for one specif ...

Clicking on the image does not result in a larger image being displayed

Currently working on an assignment that requires a modal pop-out to display larger versions of photos when clicked, with the option to go back using the X button. Unfortunately, I'm facing issues with the X button not functioning properly and images n ...

The presence of Bootstrap remains hidden unless space is designated for it

Question about Bootstrap 5.1.3: Is there a way to hide elements on a page using the bootstrap class ".invisible" without allocating space for them? Currently, when the elements are set to visible using the class ".visible", they occupy space on the page ...