I am using react-toolbox and react-css-themr to supply theme. I create my contextTheme and supply it through ThemeProvider. Everything's seems fine. I am using webpack, the styles are exported and loaded in the attribute of my page, so there is no problem with the importing the css.
EDIT: I can clearly see the context theme is loaded to the website, as I can observe RT objects
my contextTheme file looks like this and is named contextTheme.js
export default {
RTAutocomplete: require('./assets/style/themes/autocomplete.module.css'),
RTButton: require('./assets/style/themes/button.module.css')
};
I can see custom theme in tag like this
.autocomplete-module--autocomplete--tESXbPMw {
padding: 0
}
.autocomplete-module--autocomplete--tESXbPMw .autocomplete-module--suggestions--t6ziL7OQ {
background-color: red;
border-color: blue;
border-radius: 0
}
theme provider looks like this
<ThemeProvider theme={contextTheme}>
<Router store={s} history={h}>
{ routes }
</Router>
</ThemeProvider>
resulting html element still has only default style applied, because no style is attached to it.
In case my webpack css config looks like this. I am not sure if that is relevant, but just in case.
{
test: /\.scss|\.css$/i,
use: [
"style-loader",
{
loader: "css-loader",
options: {
importLoaders: 1,
modules: {
exportGlobals: true,
mode: "local",
auto: undefined,
localIdentName: "[name]--[local]--[hash:base64:8]",
},
sourceMap: shouldUseSourceMap,
}
},
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
[
"postcss-preset-env",
{
// Options
},
],
],
},
},
},
],
sideEffects: true,
},
I am starting a vue 3 component library which uses a component with a dynamic template.
The dynamic template requires the use of vue/dist/vue.esm-bundler.js. The vue 3 component compiles using vite as long as the following alias fpr
"vue" is included in the vite.config.ts file:
export default defineConfig({
plugins: [vue()],
define: {
global: {},
},
resolve: {
alias: {
"#": fileURLToPath(new URL("./src", import.meta.url)),
'vue': 'vue/dist/vue.esm-bundler.js',
'./runtimeConfig': './runtimeConfig.browser',
},
},
});
However, the same component is used in the vitepress documentation for this library and does not compile. I have added the same alias to the vitepress configuration file:
const path = require('path')
module.exports = {
title: '',
description: '',
themeConfig: {
repo: '',
sidebar: [
{
text: 'Introduction',
items: [
{ text: 'What is My Lib?', link: '/' },
],
}, {
text: 'Components',
items: [
{ text: 'B-Markdown', link: '/components/b-markdown/desc' },
],
}
],
},
vite: {
resolve: {
alias: {
'vue': 'vue/dist/vue.esm-bundler.js'
}
},
}
}
I also tried switching the alias to use
'vue': path.resolve(__dirname, '../../node_modules/vue/dist/vue.esm-bundler.js'),
When compiling the vitepress documentation using either of these vue alias lines, I obtain the following error:
runtime-core.esm-bundler.js:38 [Vue warn]: Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js".
at <Anonymous content="Test content." imgFolder="" class="toastui-editor-contents" ... >
at <VRuntimeTemplate class="toastui-editor-contents" style= {max-width: '900px', margin: 'auto'} template="<div><p>Test content.</p>\n</div>" >
at <BMarkdown content="Test content." >
at <Basic>
at <DemoContainer>
at <Components/bMarkdown/desc.md>
at <VitePressContent class="vp-doc _components_b-markdown_desc" >
at <VPDoc key=3 >
at <VPContent>
at <Layout>
at <VitePressApp>
Is this a problem with vitepress not registering the alias?
How to write nested CSS with TailWind in Nuxt?
Tailwind recommends to not use preprocessors like Sass or less and recommends it's better to use postcss-nested and import...
I tried and searched too much to use it I couldn't
I only added this config to add css nesting ability as I searched
build: {
postcss: {
plugins: {
'postcss-import': true,
'tailwindcss/nesting': {},
'postcss-nested': {},
},
},
splitChunks: {
layouts: true
}
},
And this is my tailwind config file codes
module.exports = {
mode: 'jit',
darkMode: true, // or 'media' or 'class'
theme: {
extend: {
},
},
variants: {
extend: {},
},
purge: {
content: [
`components/**/*.{vue,js}`,
`layouts/**/*.vue`,
`pages/**/*.vue`,
`plugins/**/*.{js,ts}`,
`nuxt.config.{js,ts}`
]
},
plugins: [],
}
this is my package.json file I've installed these:
#nuxtjs/tailwindcss - postcss - postcss-import - postcss-nested
Now when I try to write nested CSS I get error
I want to be able to write nested in components and in seprate css files alongside tailwind!
In vue components style section I try to write like this:
<style lang="postcss" scoped>
.test {
color:blue;
.ok{
color:red;
}
}
</style>
But it doesn't work
I have a component IndexHero.vue that has a scoped style applied to it
<template>
<v-container fluid>
<div id="tsparticles" class="particles"></div>
<v-container
fill-height
class='mt-n16 fullheight pa-0'
>
<v-row justify="center">
<v-col cols='12' align='center'>
<h1 class=" mt-n16 display-1 font-weight-black">
HEADING
</h1>
</v-col>
</v-row>
</v-container>
</v-container>
</template>
<style scoped>
.particles {
height: 100px;
width: 100px;
border: 2px dashed #f00;
}
</style>
This works fine while I'm in development npm run dev but when I generate the static build npm run generate the class name is there on the element but the class just isn't there.
I've seen other posts like this use ::v-deep particles and * >>> particles but that has not been successful for me. I've also tried removing scoped but that didn't work either. Can anyone point me in the direction of getting the style applied? Also I'm using Nuxt v2.14.4
Update:
How it shows up in the DOM tree. The canvas element is inserted by a JS library tsparticles just btw.
nuxt.config.js
import colors from 'vuetify/es5/util/colors'
import {fireDb} from './plugins/firebase';
export default {
mode: 'universal',
target: 'static',
components: true,
render: {
fallback: false
},
//If you're debugging firebase cloud messaging notifications, comment off lines 10 and 11
//Those two lines exposes the Nuxt dev server on an IP so multiple devices can connect
//And debug across platforms/screen sizes
server: {
port: 8000, // default: 3000
host: '0.0.0.0', // default: localhost
},
/*
** Headers of the page
*/
head: {
title: 'COVID-19 in Trinidad and Tobago',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: "Information on this website is not real please do not use or take into consideration.This is the developer site for CoronavirusInfoTT." },
{ hid: 'theme-color', name: 'theme-color', content: '#121212'},
//Apple Related Tags
{ hid: 'apple-mobile-web-app-title', name: 'apple-mobile-web-app-title', content: 'CoronavirusInfoTT - Developer'},
{ hid: 'apple-mobile-web-app-status-bar-style', name: 'apple-mobile-web-app-status-bar-style', content: 'black-translucent'},
//Facebook Open Graph Tags
{ hid: 'og:url', property: 'og:url', content: 'https://developer.coronavirustt.info/'},
{ hid: 'og:title', property: 'og:title', content: 'CoronavirusInfoTT - Developer'},
{ hid: 'og:description', property: 'og:description', content: "Information on this website is not real please do not use or take into consideration.This is the developer site for CoronavirusInfoTT."},
{ hid: 'og:site_name', property: 'og:site_name', content: 'developer.coronavirustt.info/'},
{ hid: 'og:image', property: 'og:image', content: 'https://developer.coronavirustt.info/tagimageversiontwo.png'},
{ hid: 'og:image:type', property: 'og:image:type', content: 'image/png'},
{ hid: 'og:image:height', property: 'og:image:height', content: '800'},
{ hid: 'og:image:width', property: 'og:image:width', content: '800'},
{ hid: 'og:image:alt', property: 'og:image:alt', content: 'A preview of the landing page'},
{ hid: 'og:type', property: 'og:type', content: 'website'},
//Twitter tags
{ hid: 'twitter:card', name: 'twitter:type', content: 'summary_large_image'},
{ hid: 'twitter:url', name: 'twitter:url', content: 'https://developer.coronavirustt.info/'},
{ hid: 'twitter:title', name: 'twitter:title', content: 'CoronavirusInfoTT- Developer'},
{ hid: 'twitter:description', name: 'twitter:description', content: "Information on this website is not real please do not use or take into consideration.This is the developer site for CoronavirusInfoTT."},
{ hid: 'twitter:image', name: 'twitter:image', content: 'https://developer.coronavirustt.info/tagimageversiontwo.png'},
{ hid: 'twitter:image:alt', name: 'twitter:image:alt', content: 'A preview of the landing page for the website'},
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
//{ rel: 'preload', as:'style', href: '../node_modules/#mdi/font/css/materialdesignicons.min.css' },
]
},
/*
** Customize the progress-bar color
*/
//loading: '#/components/WanderingCubes',
/*
** Global CSS
*/
css: [
'typeface-roboto/index.css',
'#mdi/font/css/materialdesignicons.min.css',
'#/assets/main.css',
],
/*
** Plugins to load before mounting the App
*/
plugins: [
'#/plugins/firebase.js',
],
/*
** Nuxt.js dev-modules
*/
buildModules: [
'#nuxtjs/vuetify',
'#nuxt/components',
],
/*
** Nuxt.js modules
*/
modules: [
// Doc: https://axios.nuxtjs.org/usage
'#nuxtjs/pwa',
'#nuxtjs/sitemap',
],
pwa: {
icon:{
sizes: [64, 120, 144, 152, 192, 384,512],
},
manifest:{
name: 'CoronavirusInfoTT',
short_name: 'COVID-19TT',
description: "Statistics and information about the COVID-19 virus in Trinidad and Tobago. See visualizations about the virus' activity regarding the number of cases, deaths and recoveries as well as reopening phases. It also acts as a hub for updates from the relevant authorities",
lang: 'en',
background_color: '#121212',
}
},
sitemap: {
hostname: 'https://coronavirustt.info',
gzip: true,
exclude: [
'/adminlogin',
'/admindashboard',
],
},
/*
** vuetify module configuration
** https://github.com/nuxt-community/vuetify-module
*/
vuetify: {
customVariables: ['~/assets/variables.scss'],
defaultAssets:false,
//treeShake: true,
theme: {
dark: true,
themes: {
dark: {
primary: colors.blue.darken2,
accent: colors.grey.darken3,
secondary: colors.amber.darken3,
info: colors.teal.lighten1,
warning: colors.amber.base,
error: colors.deepOrange.accent4,
success: colors.green.accent3
}
}
}
},
/*
** Build configuration
*/
build: {
/*
** You can extend webpack config here
extend (config, {isClient}) {
if (isClient){
config.optimization.splitChunks.maxSize = 200500;
}
}
*/
},
generate:{
//fallback: false,
async routes(){
const qs = await fireDb.collection('covid19tt/initiatives/initiatives').get();
let d = qs.docs.map(function(x){
let title = x.data().title;
if(title !== undefined){
title = title.toLowerCase().replace("'",'').replace(/ /g,'-');
let date = String( x.data().dateAdded);
let data = x.data();
data['dateAdded'] = date;
data['pageURL']= `https://coronavirustt.info/initiative/${data.urlTitle}/`;
return {
route: `/initiative/${x.data().urlTitle}/`,
payload: data,
};
}else{
return null;
}
});
d = d.filter( f=>{
if( f !== null) return f;}
)
return d;
}
},
}
Update:
I've worked with TsParticles before and it can be problematic sometimes.
You can check my working example on github of TsParticles on Vue.js / Nuxt.js.
<div id="tsparticles" class="particles"></div>
Based on my own previous strugles, I suggest you to rename your id to something different from tsparticles, as the names can collide on javascript (it happened to me).
I want to use Bootstrap's alert.js plugin as a front-end asset, but can not figure out how to make it work using brunch-config.js and npm.
At the moment I have such brunch config (it adds jQuery and Bootstrap css to assets):
exports.config = {
files: {
javascripts: {
joinTo: "js/app.js"
},
stylesheets: {
joinTo: "css/app.css"
},
templates: {
joinTo: "js/app.js"
}
},
conventions: {
assets: /^(web\/static\/assets)/
},
paths: {
watched: [
"web/static",
"test/static"
],
public: "priv/static"
},
plugins: {
babel: {
ignore: [/web\/static\/vendor/]
}
},
modules: {
autoRequire: {
"js/app.js": ["web/static/js/app"]
}
},
npm: {
enabled: true,
whitelist: ["phoenix", "phoenix_html", "jquery", "bootstrap"],
globals: {
$: 'jquery',
jQuery: 'jquery'
},
styles: {
bootstrap: ['dist/css/bootstrap.css']
}
}
};
Plugin file is here - ./node_modules/bootstrap/dist/js/umd/alert.js.
One more thing: with this config Brunch actually does something and adds to /js/app.js the needed ./node_modules/bootstrap/dist/js/boostrap.js file which already contains the Alert plugin.
jQuery works properly, Bootstrap css works also. The only problem - Bootstrap js plugins (there are no warnings in console).
In my package.json I have this version of Bootstrap:
{
"repository": {},
"dependencies": {
"babel-brunch": "~6.0.0",
"bootstrap": "^4.0.0-alpha.2",
"brunch": "~2.1.3",
"clean-css-brunch": "~1.8.0",
"css-brunch": "~1.7.0",
"javascript-brunch": "~1.8.0",
"jquery": "^2.2.3",
"phoenix": "file:deps/phoenix",
"phoenix_html": "file:deps/phoenix_html",
"uglify-js-brunch": "~1.7.0"
}
}
Adding require("bootstrap"); to the end of app.js solved the problem for me. I'm far from understanding brunch / bootstrap properly, but AFAIK the javascript side of bootstrap is just a collection of plugins for jQuery. Requiring bootstrap adds the plugins to the global jQuery object (already presented in your brunch-config.js).