I'm trying to randomize/minify generated class names.
Currently I'm using a fairly vanilla vue-cli project, and I'm also using Tailwind css which I hope doesn't complicate anything.
Currently this is how far I got in my vue.config.js by reading vue-loader docs, this, and this, however this only works half way... my CSS minifies perfectly, however my vue component classes dont' change, so its like it's not parsing *.vue files.
I thought this could be because I notice it mentioning using <style scoped> but with Tailwind you don't need style tags in your components. Quite literally 100% of the css is contained in my src/assets/styles/main.pcss file, which consists of a few #import statements and that's it.
module.exports = {
css: {
requireModuleExtension: false,
loaderOptions: {
css: {
modules: {
localIdentName: '[hash:6]',
},
},
},
},
chainWebpack: config => {
// disable eslint temporarily
config.module.rules.delete('eslint');
},
};
And my tailwind config:
module.exports = {
future: {
purgeLayersByDefault: true,
removeDeprecatedGapUtilities: true,
},
plugins: [],
purge: [
'./src/**/*.html',
'./src/**/*.vue',
],
theme: {},
};
Related
I am building a library that contains components and some shared CSS, like a design system.
The problem is that it is not separating the fonts in different chunks, instead, it is inlining them in the font as base 64, so the CSS file gets huge!
// vite.config.ts
import { defineConfig } from 'vite';
import vue from '#vitejs/plugin-vue';
import { resolve } from 'path';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
build: {
lib: {
entry: resolve(__dirname, 'src/index.ts'),
name: 'design-system',
},
rollupOptions: {
external: ['vue'],
output: {
globals: {
vue: 'Vue',
},
},
},
},
resolve: {
alias: [
{ find: '#', replacement: '/src' },
],
},
});
I already tried to place it in root/public, but it didn't work.
I have a file _fonts.css which import fonts like so
#font-face {
font-family: Inter;
src: url('/public/fonts/Inter-Regular.ttf') format('truetype');
font-weight: 400;
}
And then I have a main.scss that imports it
// main.scss
#import 'normalize';
#import 'themes';
#import 'fonts';
Any idea on how to split it?
I was able to accomplish this in a library we're working on by placing the fonts in the special public directory (see: https://vitejs.dev/guide/assets.html#the-public-directory).
Long story short placing assets in there makes Vite copy them over without any actual transformation and/or renaming.
First of all place your font files in public/fonts/.
Then add the following to vite.config.ts:
{
root: './',
publicDir: 'public',
}
This was necessary although it should be a default setting.
Then my font declaration looks like this:
#font-face {
font-family: MyFont;
src: url('./fonts/myfont.woff2');
font-weight: 200;
}
But - this is for the library mode. In case you're building an app just start the font URL path with / instead of ./.
To increase the width of vuetify's v-switch, i want to modify the value of vuetify's scss variable.
vuetify was configured through vue-cli, and the developed code is as follows.
// src/assets/css/overrides.scss
$font-size-root: 24px;
$switch-width: 400px;
$switch-track-width: 400px;
// vue.config.js
module.exports = {
transpileDependencies: ['vuetify'],
configureWebpack: {
devtool: 'source-map',
},
css: {
loaderOptions: {
scss: { // 8.0.3
prependData: `#import "#/assets/css/overrides.scss";`,
},
},
},
};
But nothing has changed. What stupid thing am i doing?
ref:
https://vuetifyjs.com/en/customization/sass-variables/
https://cli.vuejs.org/guide/css.html#css-modules
I wasted a lot of time with this problem. But later, I realized it was easy. You don't need to import files or write loaderOptions in vuetify.config.js.
In your src folder, create a scss folder
In your new src/scss folder, create a variables.scss file
📁 src
├─ 📁 scss
| └─ 📄 variables.scss
...
The vuetify-loader will automatically bootstrap your variables into Vue CLI's compilation process, overwriting the framework defaults. Following this documentation.
Example
// projectRoot/src/scss/variables.scss
$font-size-root: 24px;
$switch-width: 400px;
$switch-track-width: 400px;
After doing all this, stop your local server and restart with npm or yarn only once. After these steps, every change you make will appear automatically. So you don't need to restart the development server every change.
I tried to follow this tutorial to get access to a global file called variables.scss in all SFC files:
https://vueschool.io/articles/vuejs-tutorials/globally-load-sass-into-your-vue-js-applications/
My project uses vue cli 3, so I added the following property to vue.config.js:
{
css: {
loaderOptions: {
sass: {
data: `#import "src/assets/scss/variables.scss";`
}
}
},
}
the variables.scss file looks like this:
// variables.scss
$purple: #5D2D8B;
My component style looks like this:
<!-- Datepicker.vue -->
<style lang="scss" scoped>
.picker {
color: $purple!important;
}
</style>
But I got this error when trying to use the $purple variable
color: $purple!important;
^
Undefined variable: "$purple"
I've also tried to add style-resources-loader vue-cli plugin, but got the same error.
(added this when tried to use it):
{
pluginOptions: {
'style-resources-loader': {
preProcessor: 'scss',
patterns: [
path.resolve(__dirname, 'src/assets/scss/variables.scss')
]
}
}
}
It seems that on .vue files the #import statement is not applied, but in .scss files it is.
Anyone has an idea what is that about?
I need some help with configuring material-web-components to work with vue.js components. The error occurs when I want to import a #material component scss into my vue component.
SomeVueComponent.js:
<style lang="scss">
#import '#material/textfield/mdc-text-field.scss';
</style>
The error is that some #material components import other #material component scss, but cannot be found because of the includePaths, which I fixed by adding this code into my laravel-mix file:
webpack.mix.js:
mix.webpackConfig({
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
scss: 'vue-style-loader!css-loader!sass-loader?' + JSON.stringify({
includePaths: ['node_modules']
})
}
}
}
]
}
});
After saving this file everything compiles correctly but now I get this error for all of my vue components on the site:
[Vue warn]: Failed to mount component: template or render function not defined.
After a whole day of researching on how to fix this, I found out that the conflict is generating because I push the vue-loader 2 times with webpack (The default one + my custom one).
Does anyone know a workaround on how to do this? It would be really helpful.
I am using:
laravel 5.7.8
laravel-mix 4.0.15
vue 2.6.10
vue-loader 15.4.2
webpack 4.27.1
I have already tried the new way to import vue components after vue-loader v13+. (Adding the .default after the require) Still same vue error.
Vue.component('some-vue-component', require('./components/SomeVueComponent.vue').default);
SomeVueComponent.js:
<style src="#material/textfield/mdc-text-field.scss" lang="scss"></style>
Laravel 6
webpack.mix.js:
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css', {
sassOptions: {
includePaths: ['./node_modules']
}
});
After upgrading to Nuxt.js 2, I noticed that about 30 CSS files are loaded when the homepage loads. I actually noticed it when I checked Google Pagespeed Insights and saw about 30 "blocking CSS resources".
Is there any setting for lazy loading them or something like that?
Nuxt2 has the code splitting and you can use the every css files in the current page only so you have 2 way for bundling css, first is the common css in the all project and second is an isolate css file for each page. use the scoped attribute in the style tag.
for example:
//////// sample.vue//////
<template>
write somethin.....
</template>
<script>
write som,ething.....
</script>
<style lang="scss" scoped>
body {
background-color: gray;
color: #9e9e9e;
}
</style>
export default {
build: {
extractCSS: true,
optimization: {
splitChunks: {
cacheGroups: {
styles: {
name: 'styles',
test: /\.(css)$/,
chunks: 'all',
enforce: true
}
}
}
}
}
}
https://github.com/nuxt/nuxt.js/issues/3166#issuecomment-423832425