My stylus global file is imported multiple times.
How import global stylus in vue?
my vue.config.js
module.exports = {
css: {
loaderOptions: {
stylus: {
import: [
'~#/assets/stylus/reset.styl',
'~#/assets/stylus/vars.styl',
'~#/assets/stylus/mixins.styl',
'~#/assets/stylus/atomic.styl',
'~#/assets/stylus/grid.styl',
'~#/assets/stylus/colors.styl',
'~#/assets/stylus/global.styl'
]
}
}
},
}
my result
here
Related
I have a Vue web component. When I build it as a normal Vue component everything worked fine. However, it lost all the Tailwind styling immediately I converted it to a Vue Web Component. Thanks for your help in advance.
tailwind.config.js
module.exports = {
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
],
theme: {
extend: {
colors: {
},
},
},
plugins: [
],
}
tailwind.css
#tailwind base;
#tailwind components;
#tailwind utilities;
and my vite.config.js
import { defineConfig } from 'vite'
import vue from '#vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue({
template: {
compilerOptions: {
// treat all tags with a dash as custom elements
isCustomElement: (tag) => tag.includes('-')
}
}
})],
build: {
lib: {
entry: './src/entry.js',
formats: ['es','cjs'],
name: 'web-component',
fileName: (format)=>(format === 'es' ? 'index.js' : 'index.cjs')
},
sourcemap: true,
target: 'esnext',
minify: false
}
})
Anyway, for now, what I have done is to add Tailwind directly to the web component and it works.
<style>
#import url("../tailwind.css");
</style>
In src/main.js change import "./assets/main.css"; to your tailwind css file
`
I installed storybook via the vue-cli and added a .scss file in my preview.js:
import "assets/scss/core.scss";
import Vue from "vue";
import CompositionApi from "#vue/composition-api";
Vue.use(CompositionApi);
where "assets" is an alias configured in my vue.config.js to refer to the src/assets path. According to the docs :
The webpack config used for storybook is resolved from vue-cli-service, which means you don't need to have any special webpack section in storybook config folder.
So the path should ne correctly resolved, right ? However the style does not seem to be loaded as it is not applied to my components.
Am I missing something ?
FYI, here is my main.js:
module.exports = {
core: {
builder: "webpack5",
},
stories: ["../../src/**/*.stories.#(js|jsx|ts|tsx|mdx)"],
addons: [
"#storybook/addon-essentials",
"#storybook/addon-links",
],
};
And my vue.config.js :
const path = require("path");
module.exports = {
configureWebpack: {
resolve: {
alias: {
//aliases go here
"#": path.resolve(__dirname, "src"),
assets: path.resolve(__dirname, "./src/assets"),
},
},
},
css: {
loaderOptions: {
scss: {
additionalData: `#import 'assets/scss/variables';`,
},
},
},
};
Thanks !
I want to add custom theme to element-ui.
I have installed element-ui, babel-plugin-component.
Nuxt src directory
module.exports = {
srcDir: 'client/',
...
Add nuxt plugin
import Vue from 'vue';
import {
Button,
...
} from 'element-ui';
import lang from 'element-ui/lib/locale/lang/ru-RU';
import locale from 'element-ui/lib/locale';
locale.use(lang);
Vue.use(Button);
...
Add plugin to nuxt config
{ src: '#/plugins/element-ui.js' },
.babelrc file
{
"babelrc": true,
"cacheDirectory": false,
"presets": ["#nuxt/babel-preset-app"],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "~client/assets/styles/element-ui/theme"
}
]
]
}
Theme don't load.
How to fix it?
i'm Nuxt 2.13 and sass-loader 8.0.2 . i'm gonna add two env variables to my scss files. i successfully added one variable by loaders in build section on Nuxtjs:
build: {
loaders: {
scss: {
prependData: `$base_url: '${process.env.NODE_ENV == 'development' ? process.env.NUXT_BASE_URL : process.env.SITE_BASE_URL+'/'}';`,
}
}
}
but how add another???
tried
prependData: `$base_url: '${process.env.NODE_ENV == 'development' ? process.env.NUXT_BASE_URL : process.env.SITE_BASE_URL+'/'}';$nuxt_mode: '${process.env.NODE_ENV}';`
but it won't add the 2nd one.
in case of nuxt3, use the following
import { defineNuxtConfig } from 'nuxt'
export default defineNuxtConfig({
vite: {
css: {
preprocessorOptions: {
scss: {
additionalData: `#import "#/assets/scss/_variables.scss"; $primary: red;`
}
}
}
}
})
I suggest to update to sass-loader 9.0.0 and then replace prependData for additionalData which can be a function.
...
additionalData: _ => {
return `$base_url: '${process.env.NODE_ENV == 'development' ? process.env.NUXT_BASE_URL : process.env.SITE_BASE_URL+'/'}';$nuxt_mode: '${process.env.NODE_ENV}';`;
},
...
with Nuxt 2.15.4 there is no need for sass-loader (it is bundled). so :
// nuxt.config.js
export default {
build: {
loaders: {
scss: {
additionalData: `
$va1:${process.env.VAR1};
$va2:${process.env.VAR2};
$var3:${process.env.VAR3};
$var4:${process.env.VAR4};
`
}
},
}
}
I want to use it for my global variables.
The fila I want to import just has this single line:
primary = red
But i can't import the file globally.
I tried in vue.config.js (_variables.styl is in the same folter, to avoid the route as an error factor)
module.exports = {
css: {
loaderOptions: {
stylus: {
import: "./_variables.styl",
},
},
},
};