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;
Related
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?
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 am trying to import a web-font in a certain component in my Vue App (created with Vue cli webpack template). Inside the one of my components I try to import the fonts, by referencing a _fonts.scss within the project that has the contents:
#font-face {
font-family: 'SomeFont';
src: url('~/assets/fonts/SomeFont-Regular.woff2') format('woff2'),
url('~/assets/fonts/SomeFont-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
}
Then, when I open the app, I get this error:
Failed to decode downloaded font: http://localhost:8080/assets/fonts/SomeFont-Regular.woff2
Failed to decode downloaded font: http://localhost:8080/assets/fonts/SomeFont-Regular.woff
With this too:
OTS parsing error: invalid version tag
OTS parsing error: invalid version tag
I searched online for this problem and found nothing, or some relatable circumstances
Try to use relative path when importing fonts in url(). Without '~/fontPath'
Example
#font-face {
font-family: 'MyFont';
src: url("../assets/fonts/MyFont.woff2") format('woff2');
font-weight: normal;
font-style: normal;
}
I had the same problem and found the answer here Vue Cli 3 Local fonts not loading. In short, you have to replace ../assets with ~#/assets.
I'm importing bulma into Vue (installed via vue init webpack-simple ) and I can't seem to figure out how to get it to load my own external sass files.
I have it set up like this:
<style lang="sass" src="./sass/initial-variables"></style>
<style lang="sass" src="bulma"></style>
The tag pulling bulma in works just fine, but I get an error looking for my initial variables file:
ERROR in ./src/App.vue
Module not found: Error: Can't resolve './sass/initial-variables' in
'/Users/johnbriggs/Sites/mimismarket/src'
In my src folder, I have a sass directory with initial-variables.sass as a file.
What am I missing here?
It looks like you're missing the .sass. extension in your <style> tag. Webpack might take that relative import literally.
One thing I like to do to keep my single-file components clean is to have one <style> tag and then #import my SASS files:
<style lang="sass">
#import 'bulma'
#import './sass/initial-variables' // we don't need the extension here
</style>
Another thing to keep in mind is that you can import CSS/SASS files in your JavaScript, too. It's really handy for global stylesheets:
// main.js
import 'bootstrap/dist/css/bootstrap.min.css'
You can do the following in your webpack.config:
loader: 'vue-loader',
options: {
extractCSS: true,
loaders: {
sass: ExtractTextPlugin.extract({
use: 'css-loader!postcss-loader!sass-loader?indentedSyntax&data=#import "./sass/initial-variables.sass"',
fallback: 'vue-style-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.