The official said that #import will be removed in years and recommend using #use instead.
I'm using scss with Vue, I can #import rules under :v-deep:
.article__content {
width: 100%;
max-width: 800px;
::v-deep() {
#import 'highlight.js/scss/github';
}
.article {
width: 100%;
}
}
But how can I change it to #use? #use can only been used at beginning of file, and the file I'm importing is a pure stylesheet which doesn't include any mixins and variables.
Related
I want to use and change global variables from other components, my files structure looks like this...
I have my variables in global.sass file, but I can't access variables in other components.
You need to set configuration file vite.config.js :
css: {
preprocessorOptions: {
scss: {
additionalData: `#import "#/assets/global.scss";`
}
}
},
also for local fonts you can add another configuration there, set alias:
resolve: {
alias: {
'#': path.resolve(__dirname, 'src'),
}
},
and then use it something like:
#font-face {
font-family: 'Opensans-Bold';
font-style: normal;
src: local('Opensans-Bold'), url(#/assets/fonts/OpenSans-Bold.woff2) format('woff2');
}
Nikola's answer is correct. For any Nuxt3 users out there I'd like to add you need to make sure you don't have explicit css config in your nuxt config file at the same time. Otherwise you might get file already imported error
A new sass module system
Note: The Sass team discourages the continued use of the #import rule. Sass
will gradually phase it out over the next few years, and eventually remove it from the language entirely. Prefer the #use rule instead. (Note that only Dart Sass currently supports #use. Users of other implementations must use the #import rule instead.)
More details: Here
Below is the best way to global scss at that time.
vite.config.js
export default defineConfig({
css: {
preprocessorOptions: {
scss: {
additionalData: `#use "~/styles/_main.scss" as *;`,
},
},
},
plugins: [vue()],
});
styles/abstracts/_colors.scss
$default: #000000;
$default-light: #333333;
$default-dark: #000000;
styles/abstracts/index.scss
#forward './colors';
#forward ...
styles/_main.scss
#forward './abstracts';
#forward './components';
#forward './layouts';
src/index.scss => don't forget to add this import "./index.scss" in App.vue
#forward './styles/abstracts';
#use './styles/abstracts' as *;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
font-family: $font-primary;
font-size: 1.6rem;
line-height: 1.5;
text-rendering: optimizespeed;
color: $text;
overflow-y: overlay;
}
I have installed sass loader in my vue 3 project, but the issue is that I want to import variables from another file, but doesn't work
my schema is:
src
assets
scss
styles.scss
_variables.scss
styles.scss
#import url('./_variables.scss');
body{
font-family: 'Montserrat';
background-color: $primary-black;
}
.sidebar{
width: 250px;
height: 100vh;
max-height: 100vh;
background-color: $primary-black;
}
_variables.scss
$primary-black: #222222;
App.vue
Some HTML
<script>
import Sidebar from './components/Sidebar';
export default {
components: { Sidebar },
setup() {
},
}
</script>
<style lang="scss" scope>
#import url('./assets/scss/styles.scss');
</style>
And the issue is that in the browser the $primary-black variable fails, it appears background-color: $primary-black literally, I mean doesn't take de "#222222" color instead, but if I change the variable, and put it inside the styles.scss file, it works, so I'm not sure what could be the problem
Do not use the url function while importing, try the below
<style lang="scss" scope>
#import './assets/scss/styles.scss'
</style>
I'm working on building a webpage using Vue, Typescript, Webpack, and Bulma. I got everything working and building correctly but I noticed that some of my bundles were massive (over 2mb in some cases). After a lot of confusion I figured out it was because I was importing my main SCCS file that included Bulma, Bulma Fluent, and Material Design Icons into my components so that I could use the variables, mixins, and extend some of the classes. From what I understand #import simply copies everything from the import, which would explain my massive bundles.
A close approximation of my working code:
main.scss
/*Color customizations*/
#import "bulma-fluent/bulma.sass";
#import "buefy/src/scss/buefy";
#import "#mdi/font/scss/materialdesignicons";
/*Some custom classes*/
MyComponent.vue
/*Template and Script here*/
<style scoped lang="scss">
#import "./main.scss";
.floating {
#extend .m-1;
position: fixed;
bottom: 0;
right: 0;
}
#include mobile {
.floating {
max-width: unset;
left: 0;
}
}
</style>
I want to be able to reference classes/variables/mixins from my main.scss without it ballooning the size of my modules. I thought about creating a separate variables.sass file but I couldn't get that to work plus it doesn't fix the issue of extending styles. I saw this question but I'm not using Nuxt.
How can I get this working?
P.S. I'm a bit of a noob when it comes to Webpack/Vue/SASS/SCSS so I apologize if I'm just being dumb here.
Edit
In the end I split out the variables to their own file and imported those globally. It doesn't solve the use case of extending styles but I think that's a lost cause. My code is below:
Variables.scss
/*Customization here*/
#import "bulma/sass/utilities/functions.sass";
#import "bulma-fluent/src/sass/color/_all.sass";
#import "bulma/sass/utilities/initial-variables.sass";
#import "bulma/sass/utilities/derived-variables.sass";
#import "bulma/sass/utilities/mixins.sass";
Main.scss
#import "./Variables.scss";
#import "bulma-fluent/bulma.sass";
#import "buefy/src/scss/buefy";
#import "#mdi/font/scss/materialdesignicons";
/*Some custom classes*/
webpack.js
/*Other irrelevant configurations*/
{
test: /\.s[ac]ss$/,
use: [
"vue-style-loader",
"css-loader",
{
loader: "sass-loader",
options: {
additionalData: `
#import "./Variables.scss";
`
}
}
]
},
MyComponent.vue
/*Template and Script here*/
<style scoped lang="scss">
.floating {
margin: $size-1;
position: fixed;
bottom: 0;
right: 0;
}
#include mobile {
.floating {
max-width: unset;
left: 0;
}
}
</style>
I use the same stack. I have variables.scss file with variables and bulma mixins and that variables.scss file is imported only in main.scss .
To make all variables and mixins available in all components without using #import in style section you should add loaderOptions section to vue.config.js file. Here is my vue.config.js file:
module.exports = {
css: {
loaderOptions: {
scss: {
prependData: '#import "~#/assets/scss/_variables.scss";'
}
}
}
}
What would be the nearest conversion of this scss to pure CSS :-
.mfp-force-scrollbars {
&.mfp-wrap {
overflow-y: auto !important;
overflow-x: auto !important;
}
.mfp-img {
max-width: none;
}
.mfp-close {
position: fixed;
}
}
SCSS code gets compiled to CSS before use. If you want to go from SCSS to CSS just compile it. There is an online compiler here: http://beautifytools.com/scss-compiler.php
but most people either use extensions in their editor (VS Code has several) or command line tools . The Sass website is here: https://sass-lang.com/ and it has documentation and installation instructions for the CLI (https://sass-lang.com/install) so you can start compiling your SCSS directly. Here is the compiled code to answer your question directly:
.mfp-force-scrollbars.mfp-wrap {
overflow-y: auto !important;
overflow-x: auto !important;
}
.mfp-force-scrollbars .mfp-img {
max-width: none;
}
.mfp-force-scrollbars .mfp-close {
position: fixed;
}
In SCSS, the & symbol is called the "Parent Selector" and it is used in a nested selector to repeat its direct parent. Read more here: https://sass-lang.com/documentation/style-rules/parent-selector
On a very minor note, if the overflow-x and overflow-y value is the same, you can just use the shorthand overflow. So the SCSS could just be:
.mfp-force-scrollbars {
&.mfp-wrap {
overflow: auto !important;
}
.mfp-img {
max-width: none;
}
.mfp-close {
position: fixed;
}
}
How to use media query breakpoints in my vuetify application but in scss file?
For example bootstrap enable me to do that in scss file:
#include media-breakpoint-up(sm) {
.custom-class {
display: block;
}
}
what is the equivalent in vuetify? I can't find any documention in vuetify website
You can do it in scss:
#import '~vuetify/src/styles/settings/_variables';
#media #{map-get($display-breakpoints, 'sm-and-down')} {
.custom-class {
display: block;
}
}
... and you're right there is very little docs regarding breakpoints within vuetify
I achieved this by attaching a class name corresponding to the breakpoint, which is available in the $vuetify.breakpoint object. Not a perfect solution, but I only needed to do it for once element in my app. Hope it helps!
Example:
<item :class="($vuetify.breakpoint.smAndDown) ? 'sm' : ''"></item>
...
<style scoped lang="scss">
#item{
right: 130px;
&.sm{
right: 35px;
}
}
</style>