When I build (netflify build) my Gridsome personal website, tailwind CSS classes doesn't work and the website look's like without CSS.
I have already tried to build without git, reinstall tailwind...
I show my gridsome config if that's the problem:
const tailwind = require('tailwindcss');
const purgecss = require('#fullhuman/postcss-purgecss');
const postcssPlugins = [
tailwind(),
]
if (process.env.NODE_ENV === 'production') postcssPlugins.push(purgecss());
module.exports = {
siteName: 'Zolder | Works',
plugins: [],
css: {
loaderOptions: {
postcss: {
plugins: postcssPlugins,
},
},
},
}
I had this issue as well. I used the Tailwind Plugin for Gridsome and it worked locally but when deploying to Netlify, the Tailwind css wasn't getting added.
Referencing this starter file: https://github.com/drehimself/gridsome-portfolio-starter/blob/master/src/layouts/Default.vue
I added the main.css with all the Tailwind imports file to the end of the Default Layout template instead, and this worked for me.
You can add Tailwind to your Gridsome project with these steps:
edit gridsome.config.js
module.exports = {
siteName: "Zolder",
plugins: [],
chainWebpack: config => {
config.module
.rule("postcss-loader")
.test(/.css$/)
.use(["tailwindcss", "autoprefixer"])
.loader("postcss-loader");
}
};
create a global.css file in ./src/styles
#tailwind base;
#tailwind components;
#tailwind utilities;
import global.css in main.js
import './styles/global.css'
Related
I have been trying this for a while now, without success.
I have an expo app and I am using cypress to test some use cases using the web version of the app (generated by expo).
However, I would like to generate some code coverage as well. I have read the official documentation for it, that recommends to babel-plugin-istanbul do to so, but it does not seem to work with expo.
I am not sure why this would not work.
Edit
I removed the files previously pointed here as they were not important.
Thanks for a wonderful documentation provided by a hero without a cape, I figured that my settings were wrong.
All I needed to do was:
install babel-plugin-istanbul
Update babel.config.js
module.exports = {
presets: ['babel-preset-expo'],
plugins: [
'istanbul',
[
'module-resolver',
{
root: ['.'],
extensions: [
'.js',
],
alias: {
'#': './',
},
},
],
],
};
update cypress/support/index.js
import '#cypress/code-coverage/support';
update cypress/plugins/index.js
module.exports = (on, config) => {
require('#cypress/code-coverage/task')(on, config);
// add other tasks to be registered here
// IMPORTANT to return the config object
// with the any changed environment variables
return config;
};
and voilà!
Basically I want to find a way to share example some css file or image using module federation in my case I want to use react.
I did some research by I don't find a solid information abou that.
Some recomendations ?
One solution that I found was using css-module, you can use webpack or browserify in any case your css will be transform in js and you can expose it and consume it like other object/component,...
Eg:
[ Home Content Component]
import styles from './exampleCss.module.scss'; // using css module
export const globalHomeStyle = styles; //exporting the new transformed js.
webpack.config.js
...
plugins: [
new ModuleFederationPlugin({
name: 'home',
filename: 'remoteEntry.js',
remotes: {
...
},
exposes: {
'./HomeContent': './src/HomeContent.jsx',
}
Consuming the style from Home microfrontend in PDP Microfrontend:
webpack.config.js //calling the microfrontend
...
plugins: [
new ModuleFederationPlugin({
name: 'home',
filename: 'remoteEntry.js',
remotes: {
home: 'home#http://localhost:3000/remoteEntry.js',
},
exposes: {
...
}
Using the Style in PDP Microfrontend:
import { globalHomeStyle } from 'home/HomeContent';
...rest implementation
<div className='flex'>
<div className={`font-bold text-3x1 flex-grow ${globalHomeStyle.exampleCss}`}>
I hope this can be useful, if you find other solutions don't be shy add them here 👍
I deployed a Django+VueJS app that uses django webpack loader in order to render Vue apps in my Django templates. I used Nginx and Gunicorn to deploy the app to a DigitalOcean VPS, everything works without any problem but i have some doubts on how to edit my components in production, since i'm fairly new to Vue
Here is my vue.config:
const BundleTracker = require("webpack-bundle-tracker");
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
const pages = {
'main': {
entry: './src/main.js',
chunks: ['chunk-vendors']
},
}
module.exports = {
pages: pages,
runtimeCompiler: true,
filenameHashing: false,
productionSourceMap: false,
publicPath: process.env.NODE_ENV === 'production'
? 'static/vue'
: 'http://localhost:8080/',
outputDir: '../django_vue_mpa/static/vue/',
chainWebpack: config => {
config.optimization
.splitChunks({
cacheGroups: {
moment: {
test: /[\\/]node_modules[\\/]moment/,
name: "chunk-moment",
chunks: "all",
priority: 5
},
vendor: {
test: /[\\/]node_modules[\\/]/,
name: "chunk-vendors",
chunks: "all",
priority: 1
},
},
});
Object.keys(pages).forEach(page => {
config.plugins.delete(`html-${page}`);
config.plugins.delete(`preload-${page}`);
config.plugins.delete(`prefetch-${page}`);
})
config
.plugin('BundleTracker')
.use(BundleTracker, [{filename: '../vue_frontend/webpack-stats.json'}]);
// Uncomment below to analyze bundle sizes
// config.plugin("BundleAnalyzerPlugin").use(BundleAnalyzerPlugin);
config.resolve.alias
.set('__STATIC__', 'static')
config.devServer
.public('http://localhost:8080')
.host('localhost')
.port(8080)
.hotOnly(true)
.watchOptions({poll: 1000})
.https(false)
.headers({"Access-Control-Allow-Origin": ["*"]})
}
};
So in order to deploy the Vue part i did npm run build and npm created a bunch of files in my static directory. Now, every time i edit a component, in order to see the changes on the web, i do npm run build every time, which takes some time. Is this how am i supposed to do it? Or is there a shorter way?
I don't know about django, But I know about vue..
is this how am I supposed to do it?
For me, I don't suggest it, you can use your django as a backend for your frontend
that should mean you would have 2 servers running. 1 for your django and 1 for your vue app. use XHR request to access your django App, remember to handle CORS. IMHO I don't want vue to be used as a component based framework.
is there a shorter way.
YES, and this is how you do it.
add to package.json
{
...,
scripts: {
...,
'watch' : 'vue-cli-service build --watch --inline-vue',
...,
}
}
while using the following settings in vue.config.js
module.exports = {
'publicPath': '/django/path/to/public/folder',
'outputDir': '../dist',
'filenameHashing': false,
runtimeCompiler: true,
'css': {
extract: true,
},
}
i forgot about how publicPath and outputDir works..
but you can check it out here https://cli.vuejs.org/config/#publicpath
regarding the code on the package.json file..
you can check it here
https://github.com/vuejs/vue-cli/issues/1120#issuecomment-380902334
I have a Django app and am using Django's i18n module to help translating my strings. For translating JavaScript, I run
python manage.py makemessages -d djangojs
which adds all marked strings to a .po file. This works quite well for all my boring .js files in my static folder. However, we are starting to use webpack to pack some typescript (.tsx files) into a bundle.js file. This file is copied to the static folder after building, so I expected Djangos makemessages to pick up the strings from it as well. However, it seems that the strings are not parsed correctly, because most of the code in bundle.js is simply strings wrapped in eval().
I believe this means that I need webpack to - in addition to the bundle.js file - create a .js file for each .tsx file without all of the eval() nonsense, so that django's makemessages can parse it properly. I have no idea how to do this, however. My current config looks like this
var path = require("path");
var WebpackShellPlugin = require('webpack-shell-plugin');
var config = {
entry: ["./src/App.tsx"],
output: {
path: path.resolve(__dirname, "build"),
filename: "bundle.js"
},
devtool: 'source-map',
resolve: {
extensions: [".ts", ".tsx", ".js"]
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: "ts-loader",
exclude: /node_modules/
},
{
test: /\.scss$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "sass-loader" // compiles Sass to CSS
}]
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
}
]
},
plugins: [
new WebpackShellPlugin({
onBuildEnd:['./cp_to_static.sh'],
dev: false // Needed to trigger on npm run watch
})
]
};
module.exports = config;
So how can I make webpack spit out these files?
Is this the right thing to do, or is there a way to make Django parse bundle.js properly?
Turns out that all of the eval nonsense was generated by webpacks "watch" function. When simply running webpack for building the script, it works as expected
The latest 1.7 Ember beta breaks my gulp-browserify task (config below) with the following exception:
Error: browserify-shim needs to be passed a proper browserify instance as the first argument.
Gulp had been browserifying Ember happily up until 1.7 (and continues to do so for latest 1.6 using the config below). I noticed in the release notes for 1.7 that the module system has undergone some upheaval.
My question is: Is this a legitimate bug in Ember (or perhaps Browserify)? Or is Ember no longer intended to be used with tools like browserify going forward, in favor of some other specific approach?
Exact config:
packages.json :
(Note, this particular site already has jQuery embedded via a standard script tag, hence the need for browserify-shim, and the global: notation on the jquery dep.)
{
"browser": {
"handlebars": "./scripts/lib/handlebars-v1.3.0.js",
"ember": "./scripts/lib/ember-1.7.min.js"
},
"browserify-shim": {
"jquery": "global:jQuery",
"handlebars": "Handlebars",
"ember": {
"exports": "Ember",
"depends": [
"handlebars:Handlebars"
]
}
},
"browserify": {
"transform": [
"browserify-shim"
]
},
"devDependencies": {
"browserify": "^4.1.11",
"browserify-shim": "^3.5.0",
"gulp": "^3.8.1",
"gulp-browserify": "^0.5.0"
}
}
gulpfile.js :
var gulp = require('gulp'),
browserify = require('gulp-browserify');
gulp.task('scripts', function () {
gulp.src([
'./app.js',
])
.pipe(browserify({
insertGlobals: false,
debug: false
})).pipe(gulp.dest('./Scripts/build'));
});
gulp.task('default', ['scripts']);
app.js :
var Ember = require('ember');
Basic Repro:
in a test dir:
npm install gulp browserify gulp-browserify browserify-shim
ensure paths exist to deps:
"handlebars": "./scripts/lib/handlebars-v1.3.0.js"
"ember": "./scripts/lib/ember-1.7.min.js"
add my example app.js above
add my packages.json above
add my gulpfile.js above
run gulp
Swap out Ember 1.7 for 1.6 to see success.
Thanks!