Incorporate SCSS capabilities into a Vue project

Question

Incorporate SCSS capabilities into a Vue project

The default content of my packages.json file includes the following:

"postcss": {
"plugins": {
  "autoprefixer": {}
}}

Whenever I try to compile using <style lang='scss'>, it doesn't work automatically like it does for Typescript. I understand that I need to specify certain NPM packages as devDependencies and make some changes in the postcss section to get scss to compile. However, I have been unable to find any documentation on how to do this outside of webpack and I'm feeling quite lost.

css vue.js npm webpack sass

Answer 1

Answer №1

Check out the helpful guide on incorporating preprocessors in Vue using .

For instance, to compile <style> tags with SASS/SCSS:
npm install -D sass-loader node-sass
Add this to your webpack configuration:
module.exports = {
  module: {
    rules: [
      // ... other rules excluded

      // this will apply to both regular `.scss` files
      // AND `<style lang="scss">` blocks in `.vue` files
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  },
  // plugin not shown
}
Now, apart from being able to import 'style.scss', SCSS can be used in Vue components like this:
<style lang="scss"> /* add SCSS content here */ </style>
Any text within the block will undergo webpack processing as if it's within a *.scss file.

Answer 2

Check out the helpful guide on incorporating preprocessors in Vue using .

For instance, to compile <style> tags with SASS/SCSS:
npm install -D sass-loader node-sass
Add this to your webpack configuration:
module.exports = {
  module: {
    rules: [
      // ... other rules excluded

      // this will apply to both regular `.scss` files
      // AND `<style lang="scss">` blocks in `.vue` files
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  },
  // plugin not shown
}
Now, apart from being able to import 'style.scss', SCSS can be used in Vue components like this:
<style lang="scss"> /* add SCSS content here */ </style>
Any text within the block will undergo webpack processing as if it's within a *.scss file.

Incorporate SCSS capabilities into a Vue project

Answer №1

Similar questions

What could be causing Gulp Autoprefixer to generate unaltered CSS files?

Managing various iterations of identical repositories

How can I add a black-colored name and a red-colored star to the Placeholder Star as a required field?

How can you achieve three layers of nested quotes in Dynamic HTML?

Utilizing Typescript to pass props to a material-ui button enclosed in styled-components

Text fades into view from the bottom after a line break using CSS and JavaScript

The `react-hover` npm package functions flawlessly in the development environment despite being excluded from the production build

Using tabs within a Dialog prevents the Dialog from adjusting its height automatically

Creating a volume shadow effect with CSS is a great way to add

What could be causing my dropdown links to malfunction on the desktop version?

Chrome now supports clickable circular canvas corners

Injecting Vue.JS data into an HTML attribute

Creating an axios URL using Vue data results in receiving the value of undefined

Table does not have appropriate rowspan and colspan attributes

Adding spacing breakpoints in Material-UI 5 sx properties

The error message displayed is "Unable to locate module."

What is the best way to shade the background when a hyperlink is pressed?

There was an issue when rendering: "TypeError: Cannot access an empty property of an undefined object."

Vue.js v-for dynamically creates HTML blocks that capture the state of collapse with two-way data binding

Hexagonal Shape with Rotating Border Gradient in CSS