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",
},
},
},
};
Related
On
local the active input field is fine but in
production active input field is white.
When using vuetify the text input fields are fine locally but when I push to production the fields go white when active. You can see at https://www.rehop.com.au/post
I am using Nuxt v3. This is waht the plugin file looks.
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
export default defineNuxtPlugin(nuxtApp => {
const vuetify = createVuetify({
components,
directives,
theme: { dark: true }
})
nuxtApp.vueApp.use(vuetify)
})
and my nuxt config file
export default {
css: ['vuetify/lib/styles/main.sass', 'mdi/css/materialdesignicons.min.css'],
buildModules: [],
modules: ['#nuxtjs/tailwindcss', '#nuxtjs/dotenv'],
target: 'static',
imports: {
autoImport: true
},
build: {
transpile: ['vuetify'],
},
vite: {
define: {
'process.env.DEBUG': false,
},
},
runtimeConfig: {
public: {
SUPABASE_KEY: process.env.SUPABASE_KEY,
SUPABASE_URL: process.env.SUPABASE_URL,
IS_TEST: process.env.IS_TEST,
}
},
};
I tried changing variables in the styles section of the developer tools but was not able to find the cause.
By switching the label variant to solo this was fixed.
I am creating a Vue component library with Rollup, but when I use slots it gives me the following error:
Uncaught (in promise) TypeError: currentRenderingInstance is null
I made a very simple component in my library:
<script setup></script>
<template>
<button>
<slot></slot>
</button>
</template>
<style scoped></style>
Then I simply use it like this:
<ExampleComponent>
Text
</ExampleComponent>
If I remove the slot and replace it with a prop or hard-coded text, everything works fine.
This is my rollup.config.js:
import { defineConfig } from 'rollup';
import path from 'path';
import resolve from '#rollup/plugin-node-resolve';
import commonjs from '#rollup/plugin-commonjs';
import postcss from 'rollup-plugin-postcss';
import vue from 'rollup-plugin-vue';
// the base configuration
const baseConfig = {
input: 'src/entry.js',
};
// plugins
const plugins = [
vue(),
resolve({
extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
}),
// process only `<style module>` blocks.
postcss({
modules: {
generateScopedName: '[local]___[hash:base64:5]',
},
include: /&module=.*\.css$/,
}),
// process all `<style>` blocks except `<style module>`.
postcss({ include: /(?<!&module=.*)\.css$/ }),
commonjs(),
];
const external = ['vue'];
const globals = {
vue: 'Vue',
};
export default [
// esm
defineConfig({
...baseConfig,
input: 'src/entry.esm.js',
external,
output: {
file: 'dist/vue-my-lib.esm.js',
format: 'esm',
exports: 'named',
},
plugins,
}),
// cjs
defineConfig({
...baseConfig,
external,
output: {
compact: true,
file: 'dist/vue-my-lib.ssr.js',
format: 'cjs',
name: 'VueMyLib',
exports: 'auto',
globals,
},
plugins,
}),
// iife
defineConfig({
...baseConfig,
external,
output: {
compact: true,
file: 'dist/vue-my-lib.min.js',
format: 'iife',
name: 'VueMyLib',
exports: 'auto',
globals,
},
plugins,
}),
];
Any idea about the problem?
After a whole day of searching, I found the solution (here and here). It's a problem with using a library locally (e.g., through npm link) where it seems there are two instances of Vue at the same time (one of the project and one of the library). So, the solution is to tell the project to use specifically its own vue through webpack.
In my case, I use Jetstream + Inertia, so I edited webpack.mix.js:
const path = require('path');
// ...
mix.webpackConfig({
resolve: {
symlinks: false,
alias: {
vue: path.resolve("./node_modules/vue"),
},
},
});
Or if you used vue-cli to create your project, edit the vue.config.js:
const { defineConfig } = require("#vue/cli-service");
const path = require("path");
module.exports = defineConfig({
// ...
chainWebpack(config) {
config.resolve.symlinks(false);
config.resolve.alias.set("vue", path.resolve("./node_modules/vue"));
},
});
Thanks to #mikelplhts
On vite + esbuild I used:
export default defineConfig({
...
resolve: {
alias: [
...
{
find: 'vue',
replacement: path.resolve("./node_modules/vue"),
},
],
},
...
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 have a Vue CLI up and running successfully with PostCSS and all of the plugins I require. However, when it comes to setting up the same PostCSS config for Storybook, no matter which combination of things I try from various sources that I've come across, I cannot get my Webpack file to compile correctly.
.storybook/postcss.config.js
module.exports = {
plugins: {
autoprefixer: {},
'postcss-nested': {},
'postcss-custom-media': {},
'postcss-advanced-variables': {},
},
};
.storybook/webpack.config.js
const path = require('path');
const rootPath = path.resolve(__dirname, '../src');
module.exports = ({ config, mode }) => {
config.module.rules.push({
test: /\.css$/,
use: [
'style-loader',
{ loader: 'css-loader', options: { importLoaders: 1 } },
'postcss-loader',
],
});
config.resolve.alias['#'] = rootPath;
return config;
};
./storybook.config.js
import { configure } from '#storybook/vue';
import Vue from 'vue';
import Vuex from 'vuex';
import '../src/css/main.css';
import '../src/stories/main.css';
Vue.use(Vuex);
function loadStories() {
require('../src/stories');
}
configure(loadStories, module);
Error
ERROR in ./src/css/main.css (./node_modules/#storybook/core/node_modules/css-loader/dist/cjs.js??ref--3-1!./node_modules/postcss-loader/src??postcss!./node_modules/style-loader!./node_modules/css-loader??ref--6-1!./node_modules/postcss-loader/src!./src/css/main.css)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
SyntaxError
(2:1) Unknown word
1 |
> 2 | var content = require("!!../../node_modules/css-loader/index.js??ref--6-1!../../node_modules/postcss-loader/src/index.js!./main.css");
| ^
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