Utilize Sass @extend to incorporate imported CSS files in the build process

In my development setup, I have a global CSS file that houses all of the generic CSS styles.

My goal is to extend the classes from this global CSS file in any of my SCSS files. However, when I attempt to do so, I encounter an error stating that the .xyz class does not exist, leading to build failures. I've tried importing the file without success.

While adding !options next to the class can sometimes resolve the issue, I am curious if there is a more optimal solution available.

For those working with Vue using VueCli3, like myself, I utilize <style lang="scss"> for writing SCSS and aim to leverage the extend feature here. Despite referencing the Vue documentation and attempting to pass options through prependData for variable inclusion, importing the global CSS into a SCSS file and then referencing it in the prependData continues to result in Vue build failures.

cssvue.jssassextendvue-cli-3

Answer №1

It is not possible to @extend any class when using @import CSS file into SCSS file.

However, you can follow the steps below to extend a class from your pure CSS code:

  1. Convert the .css file into a .scss file.
  2. Import that global.scss file into another .scss file.
  3. Then you can use @extend to extend classes in the new file.

If your file has more than 1k lines of code, it may be problematic to extend classes.

Answer №2

If you're looking to incorporate a CSS file globally so that SCSS blocks in each component can access its content (such as variables and style definitions), one solution is to utilize the @extend feature, similar to working with variables. This means that SCSS requires the defined style to be accessible during compilation. Implementing "SCSS Global Variables" effectively should resolve your Extend issue as well.

To achieve this, you may need to adjust how Webpack manages your components. You could manually follow steps outlined here, or consider using a Vue Cli plugin like vue-cli-plugin-sass-resources-loader. Ensure that your component's <style> section includes lang="SCSS", assuming you're already doing so.

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

What is the best way to replicate the orange outline when focused?

I am in the process of creating a series of divs that can be navigated by the user using the tab key. I would like to incorporate the standard orange focus outline for these elements. Is there anyone who can provide guidance on how to achieve this? I unde ...

htmlcssfocus

The program encountered an error because it was unable to access the overview property since it was undefined

I encountered the error below Cannot read property 'overview' of undefined I am struggling to understand what is causing this issue. <template> <tr v-for="(row, fold) of perFold" :key="fold"> <td>{{ ...

vue.jsnuxt.jsk-fold

Is it more advantageous to create two distinct projects for the frontend and backend along with an API, or should I consolidate them into a

Asking for some guidance on a few queries I have. I've developed a backend node server with express & mongo to run specific tasks and store them in the database, along with creating an admin page using express & bootstrap. Everything is functioning s ...

javascriptnode.jsmongodbexpressvue.js

Ensure that the content is perfectly aligned with the rest of the page for a visually pleasing

Seeking guidance on how to symmetrically center an image gallery with a list background, regardless of the browser's size. Any tips for aligning content perfectly? I attempted using a wrapper around the gallery and list with a fixed width, but it onl ...

htmlcss

Seamless Shift: Effortless Transition

I'm attempting to develop a unique hover effect for a button. Initially, the button only displays an outline and its name inside. However, upon hovering over the button, I want it to smoothly transition to my gradient background. Despite trying multip ...

htmlcss

Accessing state in Vuex modules is crucial for managing and manipulating data effectively

Feeling a bit lost here... I'm utilizing Vuex in my project and have a module called common stored in the file common.js: const initState = { fruits: [] } export default { state: initState, mutations: { SET_FRUITS(state, fruits) { cons ...

javascriptvue.jsvuex

The navigation bar on the web app is functioning properly on Android devices but experiencing a CSS problem on

My Nextjs web app includes a navbar with a hamburger menu, logo, and avatar. The navbar functions perfectly on desktop in Chrome, Mozilla, Brave (in developer tools mobile mode), and on Android phones using Chrome. However, when accessed from an iPhone X, ...

htmlcssiosreactjsnext.js

What is the process for utilizing npm/yarn installations within a .Net Framework WebAPI project?

In my project, I utilize SCSS and would like to incorporate Bootstrap.scss in order to create a single class that inherits multiple Bootstrap classes. For instance: .myButtonClass { @col-xs-12; @col-sm-6 } This way, I can replace class="col-xs-12 col-sm- ...

css.netnpmasp.net-web-api2yarnpkg

Is there a way to have the headline gently fade in and subtly rise when the page loads using CSS?

Is it possible to make the headline fade in and move up slightly on the home page using CSS after the user lands on the website? For a visual reference, check out this example on . I know it can be achieved with translateY, but I have never tried it before ...

javascriptjqueryhtmlcss

Animating the Bookmark Star with CSS: A Step-by-Step Guide

I found this interesting piece of code: let animation = document.getElementById('fave'); animation.addEventListener('click', function() { $(animation).toggleClass('animate'); }); .fave { width: 70px; height: 50px; p ...

javascripthtmlcssanimation

"Exploring the world of CSS3: Arrow shapes and animated effects

Looking at the image provided, my task is to create and animate it. I was considering using CSS3 border-radius instead of an actual image. Below are the HTML and CSS code that I have so far. The animation I envision involves the arrow gradually appearing ...

jqueryhtmlcssjquery-animate

Issue with Vue.js transition not working when used with a computed property

I'm currently in the process of developing a basic inventory management system that will feature multiple categories for the items, along with the ability to view all items at once. Switching from the 'all' category to the 'general&apo ...

vue.jsanimate.cssvuejs-transition

When multiple checkboxes are selected, corresponding form fields should dynamically appear based on the checkboxes selected. I attempted to achieve this functionality using the select option method

Require checkboxes instead of a selection option and have multiple checkbox options. Depending on the checked checkboxes, different form fields should appear. A submit button is needed. I have included some CSS code, but a more detailed CSS code is requir ...

javascripthtmlcssforms

Values that represent half of a donut

Seeking assistance with D3.js. I have created a half-donut component that is designed to receive two values: a value variable and a threshold variable. My goal is to add a cutting arc to the half donut based on the threshold value, which ranges from 0 to 1 ...

vue.jsd3.jssvg

Is there a CSS equivalent of column-gap for rows?

After following this guide, I attempted to recreate the photo grid with some spacing between the images. Changing the column-gap property to 3px did add horizontal space, but is there a way to include vertical gaps as well? Any suggestions or solutions wou ...

htmlcss

The hyperlink appears to be malfunctioning

I've been working with a jQuery multilayer menu, but I encountered an issue with the link not being clickable. For reference: jQuery: JS Array Demo: When navigating through the menu on the demo site - "devices" -> "Mobile phones" -> "super s ...

jqueryhtmlcss

Troubleshooting issue with Vue Class Component and Vuex-class causing ESLint error

I am interested in utilizing vuex-class to bind helpers for vuex and vue-class-component However, an error message is displayed: Error: Parsing error - Using the export keyword between a decorator and a class is not allowed. Please use `export @dec class ...

typescriptvue.jsvuejs2vuex

Using Vue.js: Execute a function with a delay, but start the delay over if there is any user input

Imagine a scenario where I have a form that is connected to an API and displays information based on user input. Whenever the user makes changes, such as adjusting the number of results per page, the component should react dynamically by loading new data. ...

javascriptnode.jsvue.js

What are the dimensions for maximum picture width and height in the Bootstrap 4 grid class col-4? Additionally, can you provide some tips on minimizing image bl

Hey there! I am trying to arrange 3 screenshots in 3 separate columns in one row, resembling steps 1, 2, and 3. I want them all to have the same size. Can you advise on the maximum width and height I should use before they start getting stretched or comp ...

htmlcssbootstrap-4

Guide on making a color legend with JavaScript hover effects

On my website, there is a dynamic element that displays a table when values are present and hides it when there are no values. The values in the table are color-coded to represent different definitions. I wanted to add hover text with a color key for these ...

javascriptjqueryhtmlcsshover