Integrating SCSS with Vue 3 and Vite for Advanced Styling
Project Setup
Initialize a Vue 3 project with Vite and add the Sass preprocessor dependency:
npm install sass -D
Configuring Global Variables
To make SCSS variables available across all components without explicit imports, configure the additionalData option in vite.config.js. This injects the content of a global file into every style block.
i ...
Posted on Sun, 16 Aug 2026 16:57:39 +0000 by killfall
Integrating Sass with Vue.js and Webpack
Installing Required Dependencies
npm install sass sass-loader --save-dev
Webpack Loader Configuration
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}
Implementation in Vue Components
<style lang="scss">
@import '*.scss';
</style>
Key Sass Featurse
Variables
$primaryFontSize: 18 ...
Posted on Thu, 13 Aug 2026 16:18:21 +0000 by Visualant
SCSS selector nesting and parent reference explained
SCSS extends CSS with features like nesting and parent selector referencing to reduce repetition and improve maintainability.
1. CSS selector recap
Standard CSS selectors include:
Universal: *
Type: div, p, etc.
Class: .classname
ID: #id
Attribute selectors: [attr], [attr=val], [attr~=val], [attr|=val], [attr^=val], [attr$=val], [attr*=val]
Se ...
Posted on Tue, 23 Jun 2026 16:07:06 +0000 by squizz
Uni-App Common Scenarios Quick Reference
Common Scenarios in uni-app Development Quick Reference
This document records common issues encountered during uni-app development for future reference.
1. Line Break Display in ElementUI Textarea
When using el-input with type="textarea", the text content may not display line breaks in a table. To show line breaks, render the content ...
Posted on Fri, 15 May 2026 00:56:41 +0000 by vineld