I used to have this in vue.config.js but it no longer works after latest upgrade of vue or its deps:
chainWebpack: config => {
// disable eslint nag screen when building for different environments
if (!isProduction) config.module.rules.delete('eslint');
}
There is a part of the docs of vue-cli that says I can do this:
devServer: {
overlay: {
warnings: false,
errors: false
},
But it says overlay is not a valid option
Vue CLI 5 uses Webpack 5, which has moved devServer.overlay to devServer.client.overlay:
// vue.config.js
const { defineConfig } = require('#vue/cli-service')
module.exports = defineConfig({
devServer: {
client: {
overlay: {
warnings: false,
errors: false,
},
// or
overlay: false,
}
}
})
Related
I have 1 app using the vue pwa plugin, it works great.
The vuejs config for the app looks like this:
const WebpackNotifierPlugin = require('webpack-notifier')
module.exports = {
lintOnSave: false,
css: {
loaderOptions: {
sass: {
implementation: require('sass')
}
}
},
transpileDependencies: [
'vuex-module-decorators',
'vuex-persist'
],
pwa: {
name: 'MyApp',
themeColor: '#000000',
msTileColor: '#000000',
appleMobileWebAppCapable: 'yes',
appleMobileWebAppStatusBarStyle: 'black',
// configure the workbox plugin
workboxPluginMode: 'InjectManifest',
workboxOptions: {
// swSrc is required in InjectManifest mode.
swSrc: 'dev/sw.js',
// ...other Workbox options...
}
},
configureWebpack: {
devServer:{
historyApiFallback: true,
},
plugins: [
new WebpackNotifierPlugin(),
],
optimization: {
runtimeChunk: 'single',
splitChunks: {
chunks: 'all',
maxInitialRequests: 3,
minSize: 0,
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name(module) {
const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
return `npm.${packageName.replace('#', '')}`;
},
},
},
},
},
},
}
I have another app, exactly the same, vue2, beufy etc etc.. i installed the same stuff via the vue pwa plugin and the config looks exactly the same but when i run build it says it cannot find the sw.js file:
Error: ENOENT: no such file or directory, open 'dev/sw.js'
I have created a uber basic vue app which does the same thing here: https://github.com/johndcarmichael/vue-pwa-sw-not-found
Has anyone else got this issue, and how did you resolve it?
You are not having dev/sw.js in your project, as you set in swSrc. InjectManifest means take this sw.js source file and write precache manifest into it, producing the final service-worker.js file.
i use "#nuxtjs/tailwindcss": "^2.0.0" for my Nuxt App.
After install, it created a tailwind.config.js file. And then, i added a little code as you could see below:
module.exports = {
theme: {},
variants: {},
plugins: [],
purge: {
enabled: process.env.NODE_ENV === 'production',
content: [
'components/**/*.vue',
'layouts/**/*.vue',
'pages/**/*.vue',
'plugins/**/*.js',
'nuxt.config.js',
],
},
options: {
important: true,
},
};
I want all the Tailwind's class have important, but it weren't.
inside the tailwin's class
What i did wrong?
Most probably you are running NODE_ENV=production so its purging unused classes
Setting purge.enabled=false will do what you want. I don't recommend setting it false. If a class is used purge won't remove the class. As you are not using most of the classes in HTML they are getting removed.
module.exports = {
theme: {},
variants: {},
plugins: [],
purge: {
enabled: false, // DONT DO THIS IN PRODUCTION
content: [
'components/**/*.vue',
'layouts/**/*.vue',
'pages/**/*.vue',
'plugins/**/*.js',
'nuxt.config.js',
],
},
options: {
important: true,
},
};
If I look at the documentation the important key should be at the root of export :
// tailwind.config.js
module.exports = {
important: true,
}
instead of
// tailwind.config.js
module.exports = {
options: {
important: true,
}
}
I know what messed up.
So turn out that the problem was PostCSS
And, another thing is that in older version, the important was in options, but now it placed at the root
// tailwind.config.js
module.exports = {
important: true,
}
Having added also a vue.config.js next to my babel.config.js I realized that the code doesn't get transpiled to ES5 anymore, probably because babel.config.js is fully ignored once there's a vue.config.js (?)
How can I keep babel transpiling the code when building with the presets given while yet having a vue.config.js with other configurations?
babel.config.js
module.exports = {
presets: [['#vue/app', { useBuiltIns: 'entry', corejs: 'core-js#2' }]],
}
vue.config.js
const TerserPlugin = require('terser-webpack-plugin')
module.exports = {
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
config.optimization.minimizer = [
new TerserPlugin({
terserOptions: {
// needed for vuex-typex to work in production:
keep_fnames: true,
},
}),
]
}
},
css: {
loaderOptions: {
sass: {
data: `#import "./src/core/style/core/_variables.scss";`,
},
},
},
runtimeCompiler: true,
}
Having trouble using rollup-plugin-postcss with sapper-template:
npx degit sveltejs/sapper-template#rollup my-app
npm install rollup-plugin-postcss --save-dev
install various postcss plugin
create src/css/main.css
add import './css/main.css'; to the top line of src/client.js
*edit rollup.config.js
*add postcss.config.js
*going wrong here? I have tried several variations.
// rollup.config.js
...
import postcss from 'rollup-plugin-postcss'
...
export default {
client: {
input: config.client.input(),
output: config.client.output(),
plugins: [
replace({
'process.browser': true,
'process.env.NODE_ENV': JSON.stringify(mode)
}),
svelte({
dev,
hydratable: true,
emitCss: true
}),
resolve(),
commonjs(),
postcss({
// extract: true,
// sourceMap: true,
plugins: [require('autoprefixer')]
}),
...
// postcss.config.js
module.exports = {
plugins: {
...
autoprefixer: {}
}
};
No real error message, once I add postcss to the plugins in the client:{} of rollup.config.js - css breaks on the site.
This is a matter of simply putting the svelte plugin config together properly. I would recommend you use svelte-preprocess and setup your rollup.config.js as follows:
import autoPreprocess from 'svelte-preprocess';
const preprocessOptions = {
postcss: {
plugins: [
require('postcss-import'),
require('postcss-preset-env')({
stage: 0,
browsers: 'last 2 versions',
autoprefixer: { grid: true }
}),
...
]
}
};
...
export default {
client: {
plugins: [
svelte({
preprocess: autoPreprocess(preprocessOptions),
dev,
hydratable: true,
emitCss: true
}),
...
As you see here, you need to set the preprocess option of the svelte plugin.
In a Nuxt.js project, I've npm installed less and less-loader so I can have dynamic CSS for iView. However, when I try to overwrite iView's global variables, an error appears: "Inline JavaScript is not enabled. Is it set in your options?"
In Nuxt.js docs (https://nuxtjs.org/api/configuration-build#loaders) they state they have a preconfigured less loader. less: {}, so I tried...
less: {
javascriptEnabled: true
}
and...
less: {
options: {
javascriptEnabled: true
}
}
and even...
less: {
dev: {
options: {
javascriptEnabled: true
}
}
}
Nuxt.js seems to ignore all of this. So how should I configure it in Nuxt.js?
Add this to your nuxt.config.js
/*
** Build configuration
** See https://nuxtjs.org/api/configuration-build/
*/
build: {
/*
** You can extend webpack config here
*/
loaders: {
less: {
lessOptions: {
javascriptEnabled: true,
},
},
},
},
you can do it
build: {
/*
** You can extend webpack config here
*/
extend(config, { loaders: { less } }) {
less.javascriptEnabled = true
}
}
For Nuxt 3 with typescript, adding this on nuxt.config.ts file worked for me
{ ....
vite: {
css: {
preprocessorOptions: {
less: {
javascriptEnabled: true,
},
},
},
}
}