I added all files for template I should use in my Nuxt app (css, js, images etc.) into assets/theme folder. There is assets folder structure:
Inside assets/theme/sass/layout/_menu.scss I have this line:
background-image: url('../../css/images/close.svg');
Inside assets/theme/sass/layout/_main.scss I have this line:
#include vendor('background-image', (
'linear-gradient(to top, #{$overlay}, #{$overlay})',
'url("../../images/banner.jpg")',
It is correct path to svg file (also autocomplete works fine) but when I run app, I get error:
These relative modules were not found:
* ../../css/images/close.svg in ./node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!./node_modules/postcss-loader/src??ref--9-oneOf-1-2!./node_modules/sass-loader/lib/loader.js??ref--9-oneOf-1-3!./assets/scss/main.scss
* ../../images/banner.jpg in ./node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!./node_modules/postcss-loader/src??ref--9-oneOf-1-2!./node_modules/sass-loader/lib/loader.js??ref--9-oneOf-1-3!./assets/scss/main.scss
In assets/scss/ I have main.scss file that is my global file to import all other css, scss etc:
#import '../theme/css/main.css';
#import '../theme/sass/main';
Does anyone know what is the problem?
According to the offical documentation:
Inside your css files, if you need to reference your assets
directory, use ~assets/your_image.png(without a slash)
In your case i presume this will work:
background-image: url(~assets/theme/css/images/close.svg);
https://nuxtjs.org/docs/2.x/directory-structure/assets#images
did you solved it?
this works for me:
1. I added #nuxtjs/style-resources dependency to project
2. This is part of my nuxt.config.js:
css: ['~assets/css/styles.less'],
modules: [
['#nuxtjs/style-resources'],
],
styleResources: {
less: './assets/css/modules/*.less'
},
Related
In my Nuxt app I load all my SASS thus:
css: [
'~assets/scss/main.scss'
],
It works perfectly, except when I'm trying to use some SASS variable from within a component.
<style lang="scss">
.container {
background-color: $white;
}
</style>
In this case I get this error message:
SassError: Undefinied variable: $white
Yet, all of the SCSS contained in the SASS file where the variable is defined works throughout the app.
It is as if the app as a whole knew these files, but each individual component doesn't.
What's going on?
Most of the other answers don't take into account that Nuxt.js hides all the Webpack setup and forces you to do everything through nuxt.config.js.
My guess is that Webpack isn't compiling all the SCSS declarations together and therefore can't find the variable.
It's been a few months since I had this issue so things may have changed but here goes...
Make sure you have the correct Node packages installed (Nuxt DID NOT do this by default for me) npm i -D node-sass sass-loader
Add your CSS & SCSS files to the css: [] section of nuxt.config.js Order matters here so make sure things like variables are added before things that use them if you have separate files.
If you're using layouts (I think that's the default Nuxt setup) make sure that layouts/default.vue has a <style lang="sass"></style> block in it. If I remember correctly this can be empty but had to exist. I only have one layout but it may need to exist in all of them.
If all that seems like too much of a pain, there's a Nuxt Plugin that takes most of the work/management out of that process. Nuxt Style Resources Module
The confusing part is that:
styles from scss files CAN be loaded like this
//nuxt.config.js
css: [
'~assets/scss/main.scss'
],
//global scss file
$varcolor: black
h1{background: $varcolor}
BUT
the variables inside CAN NOT be used inside a component
//inside component
.component {background: $varcolor} // DOES NOT WORK
I also suggest the use of the nuxt style resource module:
https://github.com/nuxt-community/style-resources-module
new founded solution, checked and it's work. Founded here
add #nuxtjs/style-resources
export default {
css: [
'vendor.min.css'
],
modules: [
'#nuxtjs/style-resources'
],
//You will have to add this new object if it doesn't exist already
styleResources: {
scss: ['./assets/scss/main.scss'] // here I use only main scss with globally styles (variables, base etc)
},
}
it's strange, but if u change tilda (~) to dot(.), it's help for someone
from css: [ '~assets/scss/main.scss' ] to css: [ './assets/scss/main.scss' ]
this solution finded here
Us should either load the scss in your component
<style lang="sass">
#import 'path/to/your/_variable.scss'; // Using this should get you the variables
.my-color {
color: $primary-color;
}
Or adding the following to you to your vue.config.js
module.exports = {
css: {
loaderOptions: {
sass: {
data: `#import "#/pathto/variables.scss";`
}
}
}
};
Ref:
SassError: Undefinied variable: $white
Each <style lang="scss"> is compiled individually. You need to #import the file which defines $white into your component before the parser knows what $white means.
This is why most frameworks keep their variables in a _variables.scss file which is imported in all the other SCSS files/contexts.
The _variables.scss is not even loaded in the page, because in most cases it doesn't actually contain any rules. It only contains variable definitions which are imported into other .scss files, which output .css.
Ref:
Yet, all of the SCSS contained in the SASS file where the variable is defined works throughout the app.
If you import an SCSS file in your vue.config.js the output will be an ordinary <style> tag. Its contents will be generated at compile/build time and will result into some CSS (which apply to the entire document).
Unless specifically imported into the component SCSS, (using an #import command), the compiler will not know what $white means.
There is an important distinction to make between compilation context and browser context. Compilation happens at compile time (most likely in node-sass). Browser context is the actual browser, which only understands the CSS resulted from compilation.
How does Vue only apply style rules to the parent and not to the children with the same class? That's achieved by scoping.
It means applying a custom data-v-{key} attribute to all selectors in the generated <style> tag and to all elements the style should apply to.
See this example and inspect it using your web console: https://codesandbox.io/s/vue-template-ge2hb
It produces this markup:
As you can see, the scoped CSS has an extra [data-v-763db97b] added to the selector, which means it only applies to elements having that data attribute.
When using nuxt generate I am generating various HTML pages that happen to be about 300 kB in size. Majority of the file is CSS style placed inline to it. Is it a way to put it in an external file and reduce size of HTML ?
You can extract the CSS in the main chunk into a separate CSS file using
nuxt.config.js
module.exports = {
build: {
extractCSS: true
}
}
This is documented here
If you want to import css files globally use
module.exports = {
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'
]
}
as documented here
I'm struggling with the dotLESS #import to have a separate variables file; I just constantly get "variable is undefined".
If I browse to the variable config file it works; if I put the variables inline in the main stylesheet it works; but in an #import, no dice. I'm mapping .css as well as .less to the extension, however it also doesn't work if I use .less only.
The variables file LESS-config.less is:
/*
.LESS VARIABLES
*/
#mbw_dark_cyan: #1293b5;
#mbw_cyan: #11add4;
#mbw_magenta: #e935da;
#control_text: #ffffff;
#action_delete: #ff5400;
#section_level1_bg: #mbw_dark_cyan;
#section_level1_fg: #control_text;
#button_bg: #mbw_dark_cyan;
#button_fg: #control_text;
#button_icon: #control_text;
#data_table_header: #mbw_cyan;
.dummy {
color: #control_text;
}
Which renders as:
/*
.LESS VARIABLES
*/
.dummy {
color: #ffffff;
}
Calling stylesheet main.css is:
#import (less) '/css/LESS-config';
button {
background: #button_bg;
}
Which gives the error:
variable #button_bg is undefined on line 4 in file '/css/main.css':
[3]: button {
[4]: background: #button_bg;
----------------^
[5]: }
As I said, if I replace the import with the same variables copied and pasted, it all works fine.
I've tried saving without BOM as in another answer, but that doesn't help.
EDIT, I've tried:
Removing the (less)
Changing to double quotes
Using relative path LESS-config as opposed to virtual absolute as above
Adding logger="dotless.Core.Loggers.AspResponseLogger" log="debug" to
web.config (cache is already false)
Adding debug="1"
Adding
debug="true"
Absolutely no change in behaviour.
EDIT 2:
I created a cut-down css that only had the import statement in it; when I browse to it the imported styles are in there. However, on a refresh, I just get a blank response.
So it seems to be something to do with my IIS config / caching? I've turned off content compression but no joy; disabled all output caching for .less and .css, still no joy!
FIXED as per Toni's comment; https://stackoverflow.com/a/51754771/318411:
This turned out to be a dotLESS issue, tracked on GitHub here: https://github.com/dotless/dotless/issues/553
The complete fix was to:
Upgrade dotLESS to version 1.6.7
Downgrade Microsoft.Extensions.DependencyInjection to 1.1.1.0 due to Method
not found error
Change the file extension of the import from .css to .less
Now all working.
Please try version 1.6.7 which fixes an error that imports are only executed on the very first request.
I potentially see two problems that you have.
You are trying to call #import (less) in a css file. This is a syntax specific to less framework.
Your main.css is not a less file.
Change your main.css to a main.less file and now try generating your css from main.less as your root file.
Assuming your import url for LESS-config.less is correct.
The above mentioned corrections should probably do the trick.
#import (less, optional) "mystyle.css"; is Less syntax, you cannot use it in CSS (Less #import Rules).
If you want to use #import in your CSS, it should follow this syntax (See here)
#import url|string list-of-mediaqueries;
But, you cannot import a Less file inside your CSS anyways.
The way I would have done this:
Say you have 3 .less files: config.less, color.less, header.less
I would create a style.less file with the following content:
/*------------------------------------------------------------------------------*/
style.less
/*------------------------------------------------------------------------------*/
/* 01. config */
#import "config.less";
/* 02. color */
#import "color.less";
/* 03. header */
#import "header.less";
Then I would complie style.less which would produce, style.css and I would include style.css in my website.
I installed gatsby cli and created a basic node / gatsby.js project.
The tutorial says "Gatsby works out of the box with CSS Modules."
I also wanted to use custom css properties as described here: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables
(1) I created src/layouts/variables.css and put in css with custom properties, like:
:root {
--brand-color: #ff3333;
}
(2) Then in src/layouts/index.css I added #import './variables.css' at the very top of the css file.
(3) because of the #import in the above step, I installed and added postcss-import as the first plugin, in my gatsby-config.js file. Not sure if this is correct, as it isn't named 'gatsby-plugin-*' like the other plugins.
(4) in my footer component (src/components/Footer) I have both index.js and index.module.css. In the index.module.css I put:
.footer {
color: var(--brand-color);
}
... thinking that --brand-color will cascade via imports through src/variables.css -> src/index.css -> src/index.js -> layouts/index.js -> my footer component.
But when I run gatsby-develop, it says:
warning in ./src/components/Footer/index.module.css
postcss-custom-properties: /path/to/src/components/Footer/index.module.css:2:3: variable '--brand-color' is undefined and used without a fallback.
How can I fix this error? It does not allow the website to display properly.
OK I figured out what I was doing wrong:
Every (.module).css file that needs to use the "global" variables.css file must import it explicitly.
Adding #import '../../layouts/variables.css'; to my component's css file fixed this.
I am building a sass compiler with nodejs, electron, and node-sass.
There will be a config file that will describe some "sass compilers" for many projects and the user will have the ability to activate and deactivate them through a GUI.
I managed with "electron" to create the interface and with the use of electron`s "ipcmain" to initiate the compilers on demand.
To init a compiler, I spawn a child process which encloses the whole compiler.
The compilation is done with following code:
var result = this.sass.renderSync({
file: 'C:\\Users\\George\\Desktop\\css_compiler_tests\\test3\\scss\\style.scss',
outFile: 'C:\\Users\\George\\Desktop\\css_compiler_tests\\test3\\css\\style.css',
includePaths:[
'C:\\Users\\George\\Desktop\\css_compiler_tests\\test3\\scss\\',
'C:\\Users\\George\\Desktop\\css_compiler_tests\\test3\\scss\\foundation\\components\\'
]
});
I execute the compilation using absolute paths but the files us relative paths.
I run my program/gui and activated the compiler and I got a CSS file.
The problem is that some imports are missing.
My root folder is at 'C:\Users\George\Desktop\css_compiler_tests\test3\'.
I try to compile 'scss\style.scss' which imports 'scss_inculded-files.scss'.
The file 'scss_inculded-files' imports 'scss\foundation.scss' which imports form 'scss\foundation\components'.
Here is an example:
/*scss\style.scss*/
#import "included-files";
/*scss\_inculded-files.scss*/
#import
"includes/fonts",
"includes/custom-colors",
"includes/foundation-custom-settings",
"foundation/settings",
"foundation";
/*scss\foundation.scss*/
#import
"foundation/components/grid",
"foundation/components/accordion";
The content of the two last imports is missing.
Finaly I tried from command line and got the same error:
D:\mytests\nodejs\nodeSass> node_modules/.bin/node-sass C:\Users\George\Desktop\css_compiler_tests\test3\scss\style.scss -o C:\Users\George\Desktop\css_compiler_tests\test3\scss\ --include-path C:\Users\George\Desktop\css_compiler_tests\test3\scss\
Is there a way to include those missing files?
Thank you in advance.
Edit 1
After some experimentation I found out that the Mixins are the problem.
Let say I have a Mixin like that:
#mixin headline($size, $color: $base-color) {
color: $color;
font-size: $size;
}
It is compiled perfectly if I call it like that:
h1 {
#include headline($color: blue, $size: 12px);
}
If I don't call it isn't compiled.
I am using Foundation Zurb framework which I believe auto includes the mixins.