I am trying to add global scss variables to my vue project.
I found here(css tricks) and here(vue school) that what i have to do is to install sass-loader running npm i node-sass sass-loaderin the command line.
I also need in my project a vue.config.js file with the following :
module.exports = {
css: {
loaderOptions: {
sass: {
prependData: `#import "#/styles/_variables.scss";`
}
}
}
};
where _variables.scss is the file that i want to import globally.
When i run npm run build in my project i get this error :
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: semicolons aren't allowed in the indented syntax.
╷
1 │ #import "#/styles/_variables.scss";
│ ^
╵
If i erase the semicolon :
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: expected ";".
╷
1 │ #import "#/styles/_variables.scss"
│
If found this stackoverflow post that says that depending on my sass-loader version i have to change the prependData to data, where prependData is for "sass-loader": "^8.0.2" and data for "sass-loader": "^7.*.*"
I think the problem is somewhere in here as my sass-loader version is 6.13.4 according to
npm sass-loader -v
When i run npm update sass-loader i don't recieve any message, but the version is still 6.13.4
Accorging to npm the latest sass-loader version is 9.0.2
Does anyone know what am i doing wrong ?
My repository is here
In the latest version of sass-loader, data or prependData will not work. Try additionalData instead
css: {
loaderOptions: {
scss: {
additionalData: `
#import "#/assets/styles/_responsive.scss";
#import "#/assets/styles/_element-variables.scss";
`
},
}
}
They split scss & sass options in vue-cli 4.0.0-beta.3 see this github issue.
...
loaderOptions: {
scss: {
prependData: `#import "#/styles/_variables.scss";`
}
}
...
Related
I am using fullcalendar with vue3. I want to change change colors for button and text in fullcalendar.
vue version
"vue": "^3.2.26",
I am getting error
Syntax Error: Error: PostCSS plugin postcss-custom-properties requires
PostCSS 8.
I am following steps mentioned in fullcalendar documentation.
fullcalendar-vars.css
:root {
--fc-border-color: green;
--fc-button-text-color: #ff0000;
}
I have installed following packages
"postcss": "^8.4.7",
"postcss-calc": "^8.2.4",
"postcss-custom-properties": "^12.1.4",
"postcss-loader": "^6.2.1",
Added postcss.config.js at root
module.exports = {
plugins: [
require('postcss-custom-properties')({
preserve: false, // completely reduce all css vars
importFrom: [
'client/fullcalendar-vars.css' // look here for the new values
]
}),
require('postcss-calc')
]
}
And my vue.config.js as follow
const path = require("path");
module.exports = {
pages: {
index: {
entry: "./client/main.js",
},
},
outputDir: path.resolve(__dirname, "./client/dist"),
};
Also I would like to know, Do I need make any changes in vue.config.js?
PostCSS error
Vue CLI scaffolded projects already include PostCSS (including postcss, postcss-calc, and postcss-loader), so you don't need to install it in your project. The only dependency needed here is postcss-custom-properties.
To resolve the PostCSS error, you should uninstall the PostCSS dependencies that you had mistakenly added:
npm uninstall --save-dev postcss postcss-calc postcss-loader
Starting from scratch
To setup custom colors for FullCalendar in a Vue CLI scaffolded project:
Install postcss-custom-properties with:
npm install --save-dev postcss-custom-properties
Create postcss.config.js with the following PostCSS configuration:
// <projectRoot>/postcss.config.js
module.exports = {
plugins: [
require("postcss-custom-properties")({
preserve: false,
importFrom: [
"client/fullcalendar-vars.css",
],
}),
require("postcss-calc"),
],
}
Create fullcalendar-vars.css with the following CSS:
/* <projectRoot>/client/fullcalendar-vars.css */
:root {
--fc-border-color: green;
--fc-button-text-color: #ff0000;
}
Note: Changes to this file are not hot-reloaded, so the dev server must be restarted to reflect any updates.
Start the Vue CLI dev server with:
npm run serve
demo
I want to import a SCSS file in my Nuxt project.
For this I tried to follow the documentation where I simply add the path with filename in css file as:
nuxt.config.js
css: ['#/scss/_introPage.scss]
But it gives error as
Cannot find module '../scss/_introPage.scss'
My folder structure:
> components
> pages
> scss > _introPage.scss
> static
> store
> test
> nuxt.config.js
> package.json
How can I include the SCSS file and apply the global CSS into my project?
If anyone needs any further information please let me know.
Thank you everyone for your input.
I had to install sass, sass-loader#10 and fibers for it to work.
nom install --save-dev sass sass-loader#10 fibers
Nuxt.js provides a good way to share global CSS files with a css option in nuxt.config.js
example:
// nuxt.config.js
export default {
// other options
css: [
// Load a Node.js module directly (here it's a Sass file)
'bulma',
// CSS file in the project
'#/assets/css/main.css',
// SCSS file in the project
'#/assets/css/main.scss'
],
// other options
}
in your case, you need to add sass and sass-loader to load sass, scss, less &... files in your projects.
SASS: yarn add sass-loader sass
LESS: yarn add less-loader less
Stylus: yarn add stylus-loader stylus
to share your global style files(scss, sass, & ... ) and other good features
you can use Nuxt Style Resources.
Share variables, mixins, functions across all style files (no #import
needed)
Add #nuxtjs/style-resources dependency using yarn or npm to your project with on of these commands:
yarn add -D #nuxtjs/style-resources or npm install --save-dev #nuxtjs/style-resources
and then you can add '#nuxtjs/style-resources' in buildModules option in nuxt.config.js file import your global scss files like this:
// nuxt.config.js
export default {
// other options
buildModules: [
'#nuxtjs/style-resources',
],
styleResources: {
// your settings here
scss: ['#/assets/scss/_introPage.scss'],
sass: [],
less: [],
stylus: [],
hoistUseStatements: true // Hoists the "#use" imports. Applies only
to "sass", "scss" and "less". Default: false.
}
// other options
}
for more information see this link https://www.npmjs.com/package/#nuxtjs/style-resources
I just started a project with Vue and I want to make of Sass. I have done everything needed to set Sass globally but seems vue isn't recognizing the sass files. Do I have to watch and then compile sass to css in order to make it work?
I installed Node-sass and vue-loader
Set up the vue.config.js
But whenever I start up Vue server,I get an error message saying the variables I set in the sass files are not defined, of which I defined them in the _variables.scss
This is the Vue.config.js
module.exports = {
css: {
loaderOptions: {
sass: {
additionalData: `
#import "#/assets/sass/abstracts/_mixins.scss";
#import "#/assets/sass/abstracts/_variables.scss";
#import "#/assets/sass/base/_base.scss";
#import "#/assets/sass/layouts/_sidebar.scss";
`
}
}
}
}
I got the following error :-
error in ./src/components/SideBar.vue?vue&type=style&index=0&id=3eca7188&lang=scss
Syntax Error: SassError: Undefined variable: "$color-main".
on line 10 of src/components/SideBar.vue
>> background: $color-main;
--------------^
If you are using vue-cli or vite, you don't have to do anything but just consuming scss.
In case of importing variables in all sfc, https://css-tricks.com/how-to-import-a-sass-file-into-every-vue-component-in-an-app/ follow this.
I created a vue.config.js file to set some global sass variables (just like the documentation specifies), however when trying to access the variables in a component, I get an undefined error. Adding the same import statement manually in the component works, but somehow it's not being picked up from inside the vue.config.js file. I checked that I have node-sass and sass-loader installed and that the vue.config.js is in the project root (next to the package.json). What am I missing?
module.exports = {
css: {
loaderOptions: {
sass: {
data: `
#import "#/assets/styles/_variables.scss";
`
}
}
}
}
Change data to prependData
module.exports = {
css: {
loaderOptions: {
sass: {
prependData: `
#import "#/assets/styles/_variables.scss";
`
}
}
}
}
You can read more about this here: pre-loader docs
this code is for vue3
install:
Sass
npm install -D sass-loader#^10 sass
fibers
npm install -D fibers
Style Resources Loader
npm i style-resources-loader -D
in your vue.config.js (root level project)
module.exports = {
css: {
loaderOptions: {
sass: {
additionalData: `
#import "#/assets/styles/scss/_variables.scss";
`
}
}
}
}enter image description here
symbol # means that your file start from src folder
npm install --save-dev node-sass sass-loader
Create file 'vue.config.js' in the root
Add code below. Remember - # refers to /src folder
module.exports = {
css: {
loaderOptions: {
sass: {
data: '#import "#/assets/css/variables/_colors.scss";'
}
}
}
}
Restart the project
It's hard to troubleshoot without the full context, so here are several options you can try:
Ensure you've restarted the dev environment since changing the config (re-run yarn dev or npm run dev)
Keep the template literal to one line, as is used in docs. This shouldn't make a difference, but it might. (e.g. data: `#import "#/assets/styles/_variables.scss";`)
As you probably know, the underscore in front of a sass file denotes a sass partial. A partial is not used in the example, so it is possible that this has an effect as well. (e.g. rename _variables.scss to variables.scss and use data: `#import "#/assets/styles/variables.scss";`)
Ensure that the sass-loader, node-sass, and css-loader packages are up to date.
Try using the path without the slash after the #. e.g. #assets/styles/_variables.scss.
Try with a ~ instead of the #. e.g. ~assets/styles/_variables.scss. If nothing else has worked, try replacing the # with src as well.
Good luck!
i tried to import fontawesome.scss but it seems like i am doing it in a wrong way. So here what i did:
Fist of all, i installed it npm install #fortawesome/fontawesome-free
Next i configured webpack.config.js with file-loader
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/'
}
}]
}
Tried to import all stuff to my main.scss file
$fa-font-path: "../../node_modules/#fortawesome/fontawesome-free";
#import "../../node_modules/#fortawesome/fontawesome-free/scss/fontawesome";
#import "../../node_modules/#fortawesome/fontawesome-free/scss/solid";
Then i tried to build npm run build and got the errors:
ERROR in ./src/scss/main.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleNotFoundError: Module not found: Error: Can't resolve '../../node_modules/#fortawesome/fontawesome-free/fa-solid-900.eot' in 'C:\Users\gosto\Documents\project\src\scss'
Check if the npm module is added to the package.json file
Look for the package in the node_modules and check whether you have the files in the relative path, you have mentioned.
Read the docs for the package here
Follow the way the package is configured & imported in the docs