Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

SCSS Not Compiling in VueJS Extension Component

See original GitHub issue

General Information

[X ] Usage
Development
Documentation
Feature Request

Specific generator

[X ] Addons
HandlebarsJS

What Version you are running?

NodeJS: 8.11.1
NPM: 6.4.1
@pnp/spfx: 1.6.3

Describe your problem

Create a new ApplicationCustomizer Extension project using VueJS
Add PlaceHolderContent dependencies as described here
Create a Vue component with SCSS styling

Sample Code is here: https://github.com/marcDeSantis/vue-spfx

When running gulp serve the SCSS is ignored.

Issue Analytics

State:
Created 5 years ago
Comments:11 (4 by maintainers)

Top GitHub Comments

1reaction

astanley86commented, Jul 27, 2020

Thank you @StfBauer - you are absolutely correct. This solved it for me!

1reaction

StfBauercommented, Jul 25, 2020

@astanley86 Your issue is something else based in JS.

$style.is-active // Invalid- not possible in JavaScript because you cannot have a dash in a variable name.

$style['is-acitve'] // is when you like to request the is-active

You have a JavaScript issue in your case dashes are allowed in CSS class names but are not allowed In JavaScript.

There are two options:

array access as shown before
rename the style to isActive then you can use it with $style[is-active]

Top Results From Across the Web

VueJS + WebpackSimple not compiling SASS - Stack Overflow

I have bare new installation of VueJs by webpack simple, trying to set up SASS to CSS. Docs are saying that it is...

Unable to compile css from components written with sass

I am currently developing a chrome extension with vue thanks to the amazing vue-cli-plugin-browser-extension plugin.

Automatically import SASS/SCSS into every Vue.js component

Vue CLI 2: · Open the file called /build/utils.js · Find the line containing scss: generateLoaders('sass') · Replace it with the following:.

[Solved]-SCSS will not compile, SASS error, no .sass files-Vue.js

[Solved]-SCSS will not compile, SASS error, no .sass files-Vue.js ... Another file, loaded immediately before this one in the style-resources-loader, was missing ...

Features | Vite

Vite provides first-party HMR integrations for Vue Single File Components and ... prepending .module to the file extension, for example style.module.scss .