I'm rewriting an existing project using the latest vue enterprise boilerplate. I haven't been able to find any examples of the use of vue enterprise boilerplate so I'm doing trial and error. When using some of the existing code with large <style> blocks I'm running into compile problems importing from .scss files which are all in the directory src/design/. This code
<style lang="scss" module>
#import '#design';
.container {
#extend %relative-block;
...
throws this error
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: The target selector was not found.
Use "#extend %relative-block !optional" to avoid this error.
╷
86 │ #extend %relative-block;
│ ^^^^^^^^^^^^^^^^^^^^^^^
╵
/home/dean/src/vue/examples/rewrite.0/src/components/nav-bar.vue 86:3 root stylesheet
The relative-block exists in the design/_positioning.scss file and Intellij is able to find it
%relative-block {
position: relative;
display: block;
}
I also get errors when using sass #mixins:
#include lq-size(100%, 100%);
gives
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined mixin.
╷
50 │ #include lq-size(100%, 100%);
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
/home/dean/src/vue/examples/rewrite.0/src/app.vue 50:3 root stylesheet
The #mixin lq-size exists and Intellij finds it in design/_mixins.css:
#mixin lq-size($width, $height) {
width: $width;
height: $height;
}
These errors occur for code in new .scss files that I've added to the src/design/ directory, and for new code in existing .scss files.
I'm new to sass and scss. When I update a .scss file of add a new .scss file into the src/design/ folder do I have to tell the sass-loader to look for updated .scss files?
Related
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 am trying to use scss like below in my nuxt application. But this is not working and throwing module failed error. I have use saas-loader & node-saas as dev dependencies.
Do I need to make changes in my nuxt.config.js file too?
<style lang="scss" scoped>
#use "../assets/styles/functions" as f;
#use "../assets/styles/variables" as v;
#use "../assets/styles/components/containers/page-container";
#use "../assets/styles/components/buttons/primaryBtn";
.l-empty-page__content {
font-family: v.$body-font;
}
Error
Module build failed (from ./node_modules/sass-loader/dist/cjs.js): friendly-errors 23:27:19
SassError: Invalid CSS after " font-family: v": expected expression (e.g. 1px, bold), was ".$body-font;"
on line 15 of C:\Workspaces\nuxt-ssr\pages\test.vue
>> font-family: v.$body-font;
I'm quite new to vue.js and little bit stack.
In my .scss file I have commented line like:
// overflow: hidden;
But when I keep this line, I'm getting error:
Unknown word
and compiler highlighting this comment. I saw that it is related to webpack config, but I don't have webpack.config.js file, I have only vue.config.js file and not sure how to config it to work properly. This is my config file, which is including variables file to all styles.
module.exports = {
css: {
loaderOptions: {
sass: {
data: `#import "#/styles/_variables.scss";`
}
}
}
};
I have sass-loader package installed and it is working fine - issue only with comments in .scss file.
I also found https://github.com/webpack-contrib/sass-loader/issues/171 but they are talking about webpack.config.js which I don't have.
I had the same problem. Changing the vue.config.js file is bit complex.
But this problem was resolved when I used lang="scss" in app.js where all my css imports were present.
<style lang="scss">
...
#import './stylesheets/custom.scss';
...
</stlye>
Using a stylus block level import:
# vuetify-style.styl
.myapp
#import '~vuetify/src/stylus/main'
This is to ensure that the vuetify css doesn't interfere with elements from other parts of the page which aren't using vuetify.
But unfortunately it doesn't work, I can't compile it.
ERROR Failed to compile with 1 errors 2:13:28 pm
error in ./src/stylus/main.styl
Module build failed (from ./node_modules/stylus-loader/index.js):
Error: node_modules/vuetify/src/stylus/settings/_el
evations.styl:85:33
81| 0px 9px 46px 8px $shadow-key-ambient-opacity
82|
83| // MIXINS
84| elevation($z, important = false)
85| box-shadow: $shadow-key-umbra[$z],
---------------------------------------^
86| $shadow-key-penumbra[$z],
87| $shadow-key-ambient[$z] (important ? !important : )
88|
cannot perform $shadow-key-umbra[((0))]
It compiles only when I delete the first line (.myapp)
Link to the issue on github: https://github.com/vuetifyjs/vuetify/issues/4864
BTW I also tried to use less and import css from the package
# vuetify-style.less
vuetify-styles {
#import (less) 'vuetify/dist/vuetify.css';
}
But in this way I also got an error:
ERROR Failed to compile with 1 errors 11:57:30 AM
error in ./src/plugins/vuetify-styles.less
Module build failed:
// load the styles
var content = require("!!../../node_modules/css-loader/index.js??ref--9-1!../../node_modules/p
ostcss-loader/lib/index.js??ref--9-2!../../node_modules/less-loader/dist/cjs.js??ref--9-3!./vu
etify-styles.less");
^
Unrecognised input
in /Users/zvadym/WorkProjects/motos_as/odin/vue/src/plugins/vuetify-styles.less (line 4,
column 12)
# ./src/plugins/vuetify-styles.less 4:14-334 13:3-17:5 14:22-342
# ./src/plugins/vuetify.js
# ./src/crm/main.js
# multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/crm/ma
in.js
Found a way to deal with it. Actually I just specified the full relative path to the style file
.vuetify-styles {
#import (less) '../../node_modules/vuetify/dist/vuetify.css';
}
and installed less of course npm install -D less less-loader
I have a webpack project:
main.js
project.scss
In my project root I also have a custom NPM package called my-package. Im this are fonts and a SASS file which uses them:
my-package/fonts/font.woff
my-package/fonts/font.woff2
my-package/fonts.scss
In fonts.scss:
#font-face {
font-family: $myfont;
src:
url('./fonts/font.woff2') format('woff2'),
url('./fonts/font.woff') format('woff');
}
Ive tried importing fonts.scss into project.scss:
In project.scss
#include "./my-package/fonts.scss";
However the path to the fonts are wrong. As its just a SASS include the paths are taken relative to project.scss, so it would need to be this to work:
#font-face {
font-family: $myfont;
src:
url('./my-package/fonts/font.woff2') format('woff2'),
url('./my-package/fonts/font.woff') format('woff');
}
Can I make webpack import the SASS file so thats its variables etc are available, but also have it correct the paths to the font files? The custom module is my own so I can change the code for it but I don't want to change it to something nonsensical.
I had the same issue. What you could do is create a your-font.scss file to accompany your font and import the your-font.scss file once in a base file in your app and not import it in another .scss again. That way your URL will be correct.