I made vue component package and published it into npm.
It's work but the styles of the component are not loaded!
i made package with that command:
vue-cli-service build --target lib --name test-package ./src/index.js
and its part of my package.json:
"style": "./dist/test-package.css",
"main": "./dist/test-package.common.js",
and its styles of component:
<style scoped>
.my-bg {
backgorund: red;
}
</style>
Since you haven't provided a way to reproduce, it's impossible to know what exactly in your configuration causes this behavior. (By default CSS should be included, so you have some setting somewhere interfering).
This discussion contains a few possible fixes:
if your package.json contains: sideeffects: false, either remove it or change it to: sideEffects: ['*.css']
add css: { extract: false } to your vue.config.js's module.exports
Possibly related webpack/issues/6741:
Note: if you don't already have a vue.config.js, create it in root, with these contents:
module.exports = {
css: { extract: false }
}
Related
I created a .less file in my assets/css/myfile.less Nuxt folder and I added some CSS to it.
.edit-btn-color {
background-color: #b1c646;
color: white;
}
.edit-btn-color:hover {
background-color: darken(#b1c646, 10%);
color: white;
}
and in nuxt.config.js I do the following:
export default {
less: ['#/assets/css/myfile.less'],
}
But it does not work.
Since Nuxt2 is still using Webpack4, you need to install the v7 of less-loader (v8 is using Webpack5)
yarn add less-loader#^7 less
Then, create a .less file somewhere, like /assets/css/myfile.less
And use it in nuxt.config.js with this
export default {
css: ['~/assets/css/myfile.less'],
}
The key to use here is css, it's the same for SCSS, SASS, Less, Stylus and so on, as shown in the documentation: https://nuxtjs.org/docs/2.x/features/configuration#the-css-property
The answer for Nuxt v3 would be:
Install Less: npm i less (no less-loader needed).
For Global styles add them to your nuxt.config.ts like this:
export default defineNuxtConfig({
css: ['~/assets/less/main.less'],
})
In your components you could use Less like this:
<style lang="less" scoped>
#import (reference) '../assets/less/helpers.less';
nav {
background-color: darkkhaki;
.my-great-style; /* Imported from helpers.less */
}
</style>
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']
}
});
I'm trying to import element UI into Nuxt.js and on their twitter account they linked to glitch (https://glitch.com/edit/#!/nuxt-element-ui?path=layouts/default.vue:1:0) that has the important files listed. In the default.vue you it has this listed
<template>
<div>
<nuxt/>
</div>
</template>
<style src="element-ui/lib/theme-default/index.css"></style>
I imported element ui into my nuxt project by running:
npm i element-ui --save nuxt
searched for index.css in the folder and copy-pasted that link as a source to the style src (node_modules\element-ui\lib\theme-chalk\index.css) for the default.vue file but I am getting an error that it can not locate it.
I also tried to use the cdn style file from element ui's website:
https://unpkg.com/element-ui/lib/theme-chalk/index.css
Both of them are resulting in "Module not found"
What am I doing wrong? Any other place that has anything listed on how to import element ui into nuxt?
Global CSS should be defined in css section of nuxt.config
e.g.
module.exports = {
css: [
{ src: '~/assets/index.css', lang: 'scss' },
],
｝
and CDN stylesheet should be defined in head.links
head: {
link: [
{ rel: 'stylesheet', href: 'https://unpkg.com/element-ui/lib/theme-chalk/index.css' },
],
},
Read:
https://nuxtjs.org/api/configuration-css
https://nuxtjs.org/api/configuration-head
Inside your style, you can import it like this:
<style>
#import '~element-ui/lib/theme-default/index.css'
</style>
But you can also import it directly from your javascript:
import 'element-ui/lib/theme-default/index.css';