I am building Vue 3 app with scss. I have 3 stylesheet files - _mixins.scss, _variables.scss and base.scss. I am importing the mixins and variables files in vue.config.js as I read here, so I can use these mixins and variables in all my other components without needing to import them manually in all components.
However, I have also base.scss file, where I want to have global styles for my website (e.g. general styles for headings, etc.). I do not want to import this file in vue.config.js, because it would mean, that this file would be repeatedly included in all my components. So I tried to import it in App.vue via #use "styles/base"; or in main.js using import "styles/base.scss";.
Unfortunately in both cases, Sass compiler throws this error:
Syntax Error: SassError: #use rules must be written before any other rules.
╷
6 │ #use "styles/base";
│ ^^^^^^^^^^^^^^^^^^
╵
D:\PWND\pwnd_ui_poc_js\src\App.vue 6:1 root stylesheet
I do not really know, how I should do it correctly. For the sake of completeness, I am including the base structure of my files:
// _variables.scss
$baseGreen: #24ff00;
// _mixins.scss
#forward "variables";
#mixin section-heading {
color: $baseGreen;
}
// base.scss
#forward "mixins";
#forward "variables";
.section {
color: $baseGreen;
&-heading {
#include section-heading();
}
}
If you have any idea, how I should do this correctly, I would really appreciate your help. Thank you! :)
I'm using that configuration to load global variables for any component:
vue.config.js
module.exports = {
css: {
loaderOptions: {
sass: {
prependData: `#import '#/scss/_variables';`,
}
}
},
}
I'm trying to use Tailwindcss #apply directive in a <style> tag of a Nuxt.js Vue file. Everything works fine, but I keep getting some annoying red squiggly lines. Please, guys, I need help... Thank you!
Below is a screenshot and a snippet:
<style scoped>
.title {
#apply text-orient font-light block text-5xl pt-2;
}
.message {
#apply font-light pb-4 text-orient text-2xl text-blue-bayoux
}
</style>
There is no built-in way to solve this within VS Code. The recommended way to solve this is by making use of the Stylelint extension to handle your CSS linting (& SCSS and/or Less, etc.). It's very powerful and likely will improve your stylesheets beyond removing these errors for you.
You need to add the styleint dependencies to your project. Run:
npm install --save-dev stylelint stylelint-config-standard
yarn add -D stylelint stylelint-config-standard
Create a stylelint.config.js in the root of your project. (same location where your package.json is stored)
Place this snippet into it:
module.exports = {
extends: ["stylelint-config-standard"],
rules: {
"at-rule-no-unknown": [
true,
{
ignoreAtRules: [
"tailwind",
"apply",
"variants",
"responsive",
"screen",
],
},
],
"declaration-block-trailing-semicolon": null,
"no-descending-specificity": null,
},
};
Install these extensions to your VS Code setup:
Stylelint
Tailwind CSS IntelliSense
Last but not least, adjust your local or global VS Code settings.json file to include:
"css.validate": false,
"less.validate": false,
"scss.validate": false,
This way you will have the native linting "disabled", but are still ensuring it is linted using the Tailwind IntelliSense plugin.
Disable Vetur's style validation
Such CSS warnings may originate from the Vetur extension, which may very well be the case if the warning's icon (as seen in VSCode's "Problems" pane) is a Vue logo.
By disabling Vetur's style validation, you may lose other benefits. Although, in the long-run, it's probably better to rely on a more full-featured validator/linter than this extension.
Go to the Vetur extension settings and uncheck the option for style validation.
--- or ---
Set the option per-project, in a .vscode/settings.json file in the project root, with the following:
"vetur.validation.style": false
Vetur warnings look something like:
I found another solution Usage of Tailwind with nuxt lead to weird #apply issue #300
Just add lang="postcss" to style tag and with this fix, I haven't any error.
<style lang="postcss" scoped>
.title {
#apply text-purple-600 font-bold;
}
</style>
i think you are using prettier and that plugin get error when you make #apply in one line so try this:
<style scoped>
.title {
#apply text-orient;
#apply font-light;
#apply block;
#apply text-5xl;
#apply pt-2;
}
.message {
#apply font-light;
#apply pb-4;
#apply text-orient;
#apply text-2xl;
#apply text-blue-bayoux;
}
</style>
2 Steps
Add the lines below into: .vscode > settings.json
"css.validate": false,
"less.validate": false,
"scss.validate": false,
Install StyleLint Extension
https://marketplace.visualstudio.com/items/shinnn.stylelint
Restart, it's done!
I had the same problem with Nuxt and the solution was to follow the steps in this blog, the TL:DR is:
Install the stylelint vscode extension
Add this configuration in your stylelint.config.js
rules: {
'at-rule-no-unknown': [
true,
{
ignoreAtRules: [
'tailwind',
'apply',
'variants',
'responsive',
'screen',
],
},
],
'declaration-block-trailing-semicolon': null,
'no-descending-specificity': null,
},
In the vscode configuration uncheck the option css validate or add this to your vscode settings.json file "css.validate": false
with this steps all will work perfect.
Just in case, I had a problem with the prettier formatting too, and it was fixed with this option in my vscode settings.json file "vetur.format.defaultFormatter.html": "prettier",
Try adding the extension PostCSS Language Support; it adds support for modern and experimental CSS within Visual Studio Code.
I use VS Code and added the following to my settings:
"files.associations": {
"*.vue": "html"
}
Afterwards, the error was gone.
After installing Vuetify, I have a problem with some of my scss variables. Using scss variables like $red, $blue, $pink,.... VueJS returns an error:
Failed to compile.
./src/components/map/GmapAutocompleteField.vue?vue&type=style&index=0&lang=scss& (./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/vuetify-loader/lib/loader.js!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/map/GmapAutocompleteField.vue?vue&type=style&index=0&lang=scss&)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: ("base": #F44336, "lighten-5": #FFEBEE, "lighten-4": #FFCDD2, "lighten-3": #EF9A9A, "lighten-2": #E57373, "lighten-1": #EF5350, "darken-1": #E53935, "darken-2": #D32F2F, "darken-3": #C62828, "darken-4": #B71C1C, "accent-1": #FF8A80, "accent-2": #FF5252, "accent-3": #FF1744, "accent-4": #D50000, #e2001a: null) isn't a valid CSS value.
╷
46 │ background-color: $red;
│ ^^^^
╵
I share my variable between my components with vue.config.js
module.exports = {
publicPath: "/",
devServer: {
disableHostCheck: true
},
pwa: pwaArgs,
css: {
loaderOptions: {
scss: {
prependData: `#import "~#/scss/_variables.scss";`
}
}
}
};
But if i change my variable name to $red-color everything work.
Any idea how to avoid this conflict ?
I've created a Nuxt app with Bulma included and would like to access/override the Bulma variables in my .vue files. I've followed the instructions here which seem to match what I found in several other locations but I'm still getting an error when trying to access the $primary variable in my .vue file.
Here's my assets/css/main.scss file:
#import "~bulma/sass/utilities/_all.sass";
#import "~bulma/bulma";
My nuxt.config.js modules section:
modules: [
['nuxt-sass-resources-loader', './assets/css/main.scss']
],
And my .vue file:
<template>
<section class="container">
<div class="my-title">
About
</div>
</section>
</template>
<script>
export default {
};
</script>
<style lang="scss">
.my-title {
color: $primary;
}
</style>
Here's the error message in the terminal:
Module build failed (from ./node_modules/sass-loader/lib/loader.js): friendly-errors 11:51:52
color: $primary;
^
Undefined variable: "$primary".
in /Data/dev/GIT/Homepage/source/pages/about/index.vue (line 16, column 12)
friendly-errors 11:51:52
# ./node_modules/vue-style-loader??ref--9-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--9-oneOf-1-2!./node_modules/sass-loader/lib/loader.js??ref--9-oneOf-1-3!./node_modules/vue-loader/lib??vue-loader-options!./pages/about/index.vue?vue&type=style&index=0&lang=scss& 4:14-384 14:3-18:5 15:22-392
# ./pages/about/index.vue?vue&type=style&index=0&lang=scss&
# ./pages/about/index.vue
# ./.nuxt/router.js
# ./.nuxt/index.js
# ./.nuxt/client.js
# multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&name=client&path=/__webpack_hmr/client ./.nuxt/client.js
Can anyone see what I'm doing wrong?
UPDATE: I've narrowed it down to the nuxt.config.js modules setup by importing the .scss directly in the .vue file. This works which tell me the imports in the main.scss the file is working fine.
Okay, I wasn't able to get it working with nuxt-sass-resources-loader but I did get it working with style-resources-module from here https://github.com/nuxt-community/style-resources-module. Once I installed style-resources-module, I just added it to my nuxt.config.js modules section and added the appropriate styleResources section as follows:
modules: [
'#nuxtjs/style-resources'
],
styleResources: {
scss: [
'./assets/css/main.scss'
]
},
This config options provides to load any scss/sass file that specified by you before other files via webpack. You can interfere webpack config via these options that provide by nuxt. To experience more sass loader configuration you can check webpack sass loader section.
Don't forget install node-sass and sass-loader to use sass/scss file
in your app as mentioned by nuxt documentation.
// nuxt.config.js
build: {
loaders: {
sass: {
prependData: "#import '~bulma/sass/utilities/_all.sass;",
}
}
}
I am trying to use a less file in my vue-cli created project.
Also the question if this is best practice. Earlier I added webpack globally and started a watcher and added a webpack.config.js
This time I created the project with vue-cli / vue ui and the doc says I have to use a vue.config.js where I do this:
module.exports = {
css: {
loaderOptions: {
// pass options to sass-loader
less: {
// #/ is an alias to src/
// so this assumes you have a file named `src/variables.scss`
data: `#import "#/all.less";`
}
}
}
}
I added the file in src/all.less and also tried src/assets/less/all.less and changed the path in the config file. Both do not seem to work tho.
For me the issue was I had the language for one component set as "less" when I had in my config set up just vanilla css:
<style lang="less" scoped>
//styling here
</style>
instead of
<style lang="css" scoped>
//styling here
</style>
If you are using vue cli 3 . just use less right in your vue file, just set the lang to "less" or "scss" - pretty handy. There should be no additional configuration on the webpack side :
<style lang="less">
#import './less/index.less';