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!
Related
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
when importing a global scss file into my project via:
import into main.js, didn't let me use the variables i defined but classes and ids work.
import into App.vue, didn't load any styles at all. and i removed the scoped of course
import into vue.config.js as following
module.exports = {
transpileDependencies: [
'vuetify'
],
css: {
loaderOptions: {
sass: {
prependData: '#import "#/scss/_variables.scss";'
}
}
}
}
breaks my whole application and gives me tons of errors in cmd rel. to Vuetify.
can anybody tell me how i can import a global scss into a SPA made with latest Vue CLI and Vuetify?
You don't need to import the variables explicitly. According to the official documentation https://vuetifyjs.com/en/customization/sass-variables vue-cli-plugin-vuetify do this itself. To use global variables just follow these simple steps.
Add Vuetify using command vue add vuetify This will automatically add all the required dependency like vuetify-loader, vue-cli-plugin-vuetify, etc.
Make a variables.scss file in src/{scss, sass or styles} directory. As these are the default directories for global variables Example variable file.
Run the server, you are ready to go.
In general, this seems to work now:
// vue.config.js
module.exports = {
css: {
loaderOptions: {
sass: {
additionalData: '#import "~#/assets/scss/_variables.scss";'
}
}
}
}
I am trying use sass loader for node modules. But no matter what I try, the following error occurs:
SassError: Can't find stylesheet to import.
My vue.config.js look like this:
module.exports = {
css: {
sourceMap: true,
loaderOptions: {
scss: {
prependData: `
#import "~#/my-node-module/theme/engine.scss";
`
}
}
},
};
Try this, from the docs:
#import "~my-node-module/theme/engine.scss";
The ~ tells Webpack that the import path is not a relative path.
The # is a Vue CLI 3+ alias for the src directory.
So ~# is essentially the same as #. Either way, Webpack knows the path is not relative and checks the src directory, and won't find the node module.
The ~ by itself causes Webpack to look elsewhere, usually node_modules.
Project .scss file
If you had a .scss asset in your src > assets > scss directory, for example, you could do this:
#import '#/assets/scss/variables.scss';
Or this:
#import '~#/assets/scss/variables.scss';
Or even this:
#import '~/../src/assets/scss/variables.scss';
My app used to work fine until I updated VueJS this morning. Now when I build, it shows the following error:
Error: Conflict: Multiple assets emit to the same filename img/default-contractor-logo.0346290f.svg
There's only one file like this in the repo.
Here's my vue.config.js:
module.exports = {
baseUrl: '/my/',
outputDir: 'dist/my',
css: {
loaderOptions: {
sass: {
data: `
#import "#/scss/_variables.scss";
#import "#/scss/_mixins.scss";
#import "#/scss/_fonts.scss";
`
}
}
},
devServer: {
disableHostCheck: true
}
};
I tried webpack fixes recommended in similar cases, but non helped.
I had the same error when importing SVG files using dynamically generated path in the require statement:
const url = require("../assets/svg/#{value}");
<img src={{url}} />
In this case file-loader processes all SVG files and saves them to the output path. My file-loader options were:
{
loader: "file-loader",
options: { name: "[name].[ext]" }
}
The folders structure has duplicate file names, something like this:
assets
|__ one
|____ file.svg
|__ two
|____ file.svg
In this case file-loader saves both file.svg files to the same output file: build/assets/file.svg - hence the warning.
I managed to fix it by adding [path] to the name option:
{
loader: "file-loader",
options: { name: "[path][name].[ext]" }
}
The answer by #ischenkodv is definitely correct, but because of my inexperience with webpack, I needed a little more context to use the information to fix the problem.
For the benefit of anyone else in the same situation, I'm adding the following details which I hope will be useful.
This section of the Vue.js documentation was particularly helpul:
VueJS - Modifying Options of a Loader
For the TL;DR fix, here is the relevant chunk of my vue.config.js:
// vue.config.js
module.exports = {
// ---snip---
chainWebpack: config =>
{
config.module
.rule('svg')
.test(/\.svg$/)
.use('file-loader')
.tap(options =>
{
return { name: "[path][name].[ext]" };
});
}
// ---snip---
};
In my project it was the flag-icon-css NPM package that was causing the Multiple assets emit to the same filename conflict errors. The above update to the vue.config.js file resolved the problem for me.
I suspect that the regular expression in the test could be tightened up to target just the items in the flag-icon-css package rather than matching all SVG files, but I haven't bothered since it's not causing any adverse effects so far.
I've a folder some scss-files under src/assets/scss and I want to accomplish, that my src/assets/scss/main.scss is watched and compiled during npm run serve and npm run build.
The compiled file should be placed in public or in dist, I don't know what the better solution is. I've tried to add an output-directory to my vue.config.js but nothing worked.
This is my current vue.config.js:
module.exports = {
css: {
loaderOptions: {
sass: {
data: '#import "#/assets/scss/main.scss";',
outputDir: './public/css/main.css'
}
}
}
}
The styles from main.scss will not be loaded in a vue-component. These styles will be loaded globally for the whole website.