I have a small project where I am trying to use Snowpack built-in optimization instead of #snowpack/plugin-webpack (docs).
When running a build process, comments from scss file are removed. What can I do to keep my comments?
This is what I am using in snowpack.config.mjs file:
optimize: {
bundle: true,
minify: false,
sourcemap: false,
target: 'es2015',
},
plugins: [
'#snowpack/plugin-sass',
'#snowpack/plugin-postcss'
],
I tested it in a simple index.scss file:
/* ------------ Comment example ---------- */
body {
font-family: sans-serif;
color: pink;
}
The resulted index.css file doesn't have my comment, but a different one:
/* build/index.css */
body {
font-family: sans-serif;
color: pink;
}
I don't need this new comment, but would like to keep mine.
Related
I'm trying to load a company font from a node_modules folder which only includes fonts and icons, it was working locally. At first, I thought it was because Vite/Rollup don't have the ~ by default, so I added an alias in vite config, but actually what I think really happens is that Rollup simply disregard (doesn't include) my node_modules/#company because I'm not importing any JS/TS code from it (it's just fonts/icons), so I assume that Rollup is probably skipping or ignoring that in the tree shaking process during the prod build because the only time it's reference is through the #import in my scss file which is probably not enough.
// https://vitejs.dev/config/
export default defineConfig({
base: './',
plugins: [
Vue({
reactivityTransform: true,
template: { transformAssetUrls },
}),
],
resolve: {
alias: {
'~#company': path.resolve(__dirname, 'node_modules/#company'),
'#': `${path.resolve(__dirname, './src')}`,
},
},
}
this only works locally, it doesn't work from a build (I get 404)
/* scss file */
#font-face {
font-family: 'comp-icon';
src: url('~#company/icons/fonts/comp-icon.woff2') format('woff2'), url('~#company/icons/fonts/comp-icon.woff') format('woff');
font-weight: normal;
font-style: normal;
}
So like I said, I think Rollup is ignoring my node_modules/#company folder completely during the prod build tree shaking process.
I looked for why it doesn't work and came across this post in a similar issue, that person used rollup-plugin-copy lib to copy the font into the public assets folder and that seems to work for me but is not ideal since it copies font from one place to another on every build.
// https://vitejs.dev/config/
export default defineConfig({
base: './',
plugins: [
Vue({
reactivityTransform: true,
template: { transformAssetUrls },
}),
copy({
targets: [{ src: './node_modules/#company/icons/fonts/**/*', dest: 'public/assets/fonts'
}],
}),
],
resolve: {
alias: {
'~#company': path.resolve(__dirname, 'node_modules/#company'),
'#': `${path.resolve(__dirname, './src')}`,
},
},
}
and using it with
/* scss file */
#font-face {
font-family: 'comp-icon';
src: url('fonts/comp-icon.woff2') format('woff2'), url('fonts/comp-icon.woff') format('woff');
font-weight: normal;
font-style: normal;
}
It seems to work but I think it's just an ugly patch, I don't really wish to keep this copy process unless I really have to. My project is a Vue 3 + Vite + Vitest, however I assume that my problem is stricly a Vite/Rollup problem.
What is the correct way to load custom company fonts from a node_modules that I believe gets excluded from Rollup at the tree shaking process? What do I need to do to get this working and expect Rollup to include all my fonts files (woff, woff2, ttf) in my final prod build?
EDIT
Creating an alias like this SO that was provided in the comments did help with my use case. However in my case I wanted to keep # as an alias to src so I added a ~ alias, it's similar to how it works in WebPack except that I need to add a trailing slash after the tilda, it would be nice to find how to make it the same as WebPack (path.join is suppose to help but that didn't work) but for now it's acceptable
resolve: {
alias: {
'~': path.resolve(__dirname, './node_modules'),
'#': `${path.resolve(__dirname, './src')}`,
},
},
#font-face {
font-family: 'se-icon';
src: url('~/#company/icons/fonts/se-icon.woff2') format('woff2'), url('~/#company/icons/fonts/se-icon.woff') format('woff');
font-weight: normal;
font-style: normal;
}
Referencing files from within node_modules folder works for me in Vite 4.0.1
Might be that it's because I'm using tailwind, IDK.
#import "#openfonts/ubuntu_latin-ext/index.css";
I have Laravel 8 and laravel-dompdf installed.
In the config/domppdf.php file i have some settings
"font_dir" => storage_path('pdf-assets-cache/'),
"font_cache" => storage_path('pdf-assets-cache/'),
"temp_dir" => storage_path('pdf-assets-cache/'),
"chroot" => realpath(base_path()),
"pdf_backend" => "PDFLib",
"enable_remote" => true,
"enable_html5_parser" => true,
The view:
#font-face {
font-family: 'TTNorms-Reg';
src: url('/pdf-fonts/TTNorms-Reg.eot') format('embedded-opentype'),
url('/pdf-fonts/TTNorms-Reg.woff2'),
url('/pdf-fonts/TTNorms-Reg.woff') format("woff"),
url('/pdf-fonts/TTNorms-Reg.ttf');
format("truetype");
}
body {
color: black !important;
background: white;
font-size: 13px;
line-height: 20px;
font-family: TTNorms-Reg;
}
In my controller i tried
$pdf = PDF::loadView('frontend.attendees.ticket', $data)
->setPaper('a4', 'portrait')
->setOptions(['dpi' => 96,
'isHtml5ParserEnabled' => TRUE,
'isRemoteEnabled' => TRUE,
'enable_html5_parser' => TRUE,
'enable_remote' => TRUE,
'enable_css_float' => TRUE,
'chroot' => storage_path('/')]);
The view loads perfectly with
return view('frontend.attendees.ticket', $data);
But the pdf result is without images and fonts.
When enabling the warnings I get:
Permission denied on /pdf-fonts/TTNorms-Reg.woff2. The file could not be found under the paths specified by Options::chroot
Kinda stuck. Any help or hints are much appreciated!
Solved by adding the utm and cache to the storage/pdf-assets-cache/ folder. The steps:
Not needed:
#font-face {
font-family: 'TTNorms-Reg';
src: url('/pdf-fonts/TTNorms-Reg.eot') format('embedded-opentype'),
url('/pdf-fonts/TTNorms-Reg.woff2'),
url('/pdf-fonts/TTNorms-Reg.woff') format("woff"),
url('/pdf-fonts/TTNorms-Reg.ttf');
format("truetype");
}
Download load_font.php
https://github.com/dompdf/utils/blob/master/load_font.php
In terminal
php load_font.php TTNorms-Reg public/fonts/TTNorms-Reg.ttf
php load_font.php MG-mono public/fonts/MonumentGrotesk-Mono.ttf
Copy newly generated .ufm, .ufm.php, dompdf_font_family_cache.php files in
vendor/dompdf/dompdf/lib/fonts/ folder
to
storage/pdf-assets-cache/ folder
In a Nuxt project i have created a button component with the following style:
<style lang="scss">
.my-button {
// lots of cool styles and stuff here
$height: 28px;
height: $height;
border-radius: $height / 2;
}
</style>
The problem is the border-radius: $height / 2; line gives this warning:
╷
182 │ border-radius: $height / 2;
│ ^^^^^^^^^^^
╵
components/MyButton.vue 182:20 button-size()
components/MyButton.vue 186:5 root stylesheet
: Using / for division is deprecated and will be removed in Dart Sass
2.0.0.
Recommendation: math.div($height, 2)
It also links to this page describing the deprecation.
However if i add #use "sass:math" to the top of my style tag like so:
<style lang="scss">
#use "sass:math";
//Cool styles and stuff
$height: 28px;
height: $height;
border-radius: math.div($height, 2);
</style>
I get this error:
[Vue warn]: Error in render: "Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js): 12:13:59
SassError: #use rules must be written before any other rules.
╷
102 │ #use "sass:math";
│ ^^^^^^^^^^^^^^^^
╵
components/MyButton.vue 102:1 root stylesheet"
I think i need to add the import of #use "sass:math" somewhere in nuxt.config.js file to load it in all components or similar, but i am not able to figure out where.
The css related blocks in my nuxt.config.js currently looks like:
build: {
postcss: {
plugins: {
'postcss-easing-gradients': {},
},
},
},
styleResources: {
scss: [
'~/assets/global-inject.scss',
],
},
css: [
'~/assets/base.scss',
'~/assets/reset.scss',
],
Updating #nuxtjs/style-resources to above version 1.1 and using hoistUseStatements fixed it.
I changed the styleResources object in nuxt.config.js to:
styleResources: {
scss: [
'~/assets/global-inject.scss',
],
hoistUseStatements: true,
},
and added #use "sass:math"; to the top of global-inject.scss.
Updated answer
What if you try this in your nuxt.config.js file?
{
build: {
loaders: {
scss: {
additionalData: `
#use "#/styles/colors.scss" as *;
#use "#/styles/overrides.scss" as *;
`,
},
},
...
}
Or you can maybe try one of the numerous solutions here: https://github.com/nuxt-community/style-resources-module/issues/143
Plenty of people do have this issue but I don't really have a project under my belt to see what is buggy. Playing with versions and adding some config to the nuxt config is probably the way to fix it yeah.
Also, if it's a warning it's not blocking so far or does it break your app somehow?
Old answer
My answer here can probably help you: https://stackoverflow.com/a/68648204/8816585
It is a matter of upgrading to the latest version and to fix those warnings.
I'm aware of the question change-default-font-in-vuetify in SO, but it doesn't address my problem as it was posted before vue-cli-3 came out, so the ideas there don't apply here as that, the official docs from Vuetify on how to change themes and other options don't have any valid step for when the project is created with vue-cli 3.
So far my attempts go like this:
vue create fooproject (using default config, but even if I don't use the default but cherrypick what I want in the project and select the css-preprocessor as stylus manually it won't work)
vue add vuetify
it creates a plugin dir: src/plugins, where it stores vuetify.js
add a v-btn in the HelloWorld component just for knowing if the font had effect
Then I should be able to import ../stylus/main.styl, where I have:
#import '~vuetify/src/stylus/settings/_variables'
$body-font-family = 'Open Sans', sans-serif;
$heading-font-family = 'Montserrat', sans-serif;
#import '~vuetify/src/stylus/main'
I even tried with #import '~vuetify/src/stylus/main' , do I have to do also vue add additional stylus-loader dependencies or anything plus? Because that's exactly what it's NOT recommended on Vuetify's website.
Error log: no errors, I just keep seing Roboto font in my material buttons
Any remarks?
Other attempts:
I tried to follow the steps written by Jacob E. Dawson but I'm missing something super silly probably.
Edit:
the linked article from medium at the time didn't specify it was not scoped to a specific Vue version as of September 2019.
So I just took a quick and fresh glance back to this, at the end it was something silly, if a project is created with vue-cli 3 (either custom choices or default), then obviously in the component App.vue I had to take out font-family from the style section as it overwrites the CSS:
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif; /* this was it */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
EDIT:
It's possible that some styles are broken when importing styles from main.styl:
https://github.com/vuetifyjs/vuetify/issues/3583
Does everything load, do you get any errors?
It seems it should work, unless perhaps you have some typos somewhere, or incorrect paths?
For example stylus should be styles in your #require '~vuetify/src/stylus/main.styl'.
do I have to do also vue add stylus-loader?
It should already be added for you.
If you did not select specific CSS preprocessor (i.e. stylus) during vue-cli installation, then you need to add it manually
npm i -S stylus stylus-loader
module: {
rules: [
{
test: /\.styl$/,
loader: ['style-loader', 'css-loader', 'stylus-loader']
}
]
}
This is working for me using nuxt 2.15.8.
Add this to your nuxt.config.js
vuetify: {
treeShake: true,
defaultAssets: {
font: {
family: "Inter",
},
icons: "mdi",
},
}
If you need different font weights you might have to import them manually in you CSS or as a in your HTML
I have a vue file composed as followed (not really important) :
<template>
//some pseudo-html
</template>
<script>
//some javascript
</script>
<style lang='stylus'>
#import '~variables'
.card
cursor pointer
//some more stylus
</style>
I have formatOnSave activated in VSCode, I also have vetur and esLint installed.
When I use CSS code inside a classic <style> tag, I have no problem, but when I use lang='stylus', ESLint is still looking for CSS ( I get syntax errors like [css] { expected (css-lcurlyexpected) ).
Also, the auto-format on save just mess eveything up when I use stylus, it puts everything on the same line. Result after save :
<style lang='stylus'>
#import '~variables'
.card cursor pointer position relative padding //some more stylus
</style>
I tried to change the followinf settings in vscode :
vetur.format.defaultFormatter.css
vetur.format.defaultFormatter.stylus
but to no avail.
My current settings:
{
"workbench.colorTheme": "FlatUI Immersed",
"workbench.iconTheme": "material-icon-theme",
"files.trimTrailingWhitespace": true,
"editor.insertSpaces": true,
"editor.formatOnSave": true,
"editor.detectIndentation": false,
"editor.formatOnPaste": false,
"editor.formatOnType": true,
"editor.renderControlCharacters": true,
"editor.renderWhitespace": "all",
"editor.minimap.enabled": false,
"editor.mouseWheelScrollSensitivity": 2,
"editor.tabSize": 4,
"editor.fontSize": 15,
"window.zoomLevel": -1,
"workbench.startupEditor": "newUntitledFile",
"markdown.extension.preview.autoShowPreviewToSide": true,
"markdown.preview.breaks": true,
}
And workspace specific settings :
"settings": {
"files.associations": {
"*.vue": "html"
},
"editor.tabSize": 2,
"editor.formatOnSave": true,
// Defines space handling before function argument parentheses. Requires TypeScript >= 2.1.5.
"typescript.format.insertSpaceBeforeFunctionParenthesis": true,
// Defines space handling before function argument parentheses. Requires TypeScript >= 2.1.5.
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// Eslint options
"eslint.enable": true,
"eslint.options": {
"extensions": [
".html",
".js",
".vue",
".jsx"
]
},
// An array of language ids which should be validated by ESLint
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "html",
"autoFix": true
}
],
// Run the linter on save (onSave) or on type (onType)
"eslint.run": "onSave",
// Turns auto fix on save on or off.
"eslint.autoFixOnSave": true,
}
It would be absolutely awesome if someone knows how to have the formatter and the linter correctly take that into account, but after 2 hours digging, i would honestly settle for a way to disable the formatter and the linter just for the <style> tag.
So, after digging some more, i found a solution :
delete this part of the settings :
"files.associations": {
"*.vue": "html"
},
And replace html by vue in this part :
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
],
And also add :
"vetur.format.defaultFormatter.js": "none"