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,
},
},
},
}
}
Related
I write Vue2 app using Vuetify2. I need to add sass-loader to webpack as per docs: https://vuetifyjs.com/en/getting-started/installation/#webpack-install
So I need to edit webpack and want to do this using chainWebpack. According to docs I can do it in vue.config.js. The issue is that I don't know how to properly 'convert' regular webpack snippet to chaining. I need to chain this:
// webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.s(c|a)ss$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
// Requires sass-loader#^7.0.0
options: {
implementation: require('sass'),
indentedSyntax: true // optional
},
// Requires >= sass-loader#^8.0.0
options: {
implementation: require('sass'),
sassOptions: {
indentedSyntax: true // optional
},
},
},
],
},
],
}
}
and this is my vue.config.js file where I tried to use chainWebpack (note that transpileDependencies was in this file before, I don't touch it and it must be here):
const { defineConfig } = require('#vue/cli-service')
module.exports = defineConfig({
transpileDependencies: [
'vuetify'
],
chainWebpack: config => {
config.module
.rule('sass')
.test(/\.s(c|a)ss$/)
.use('vue-style-loader','css-loader',)
.loader('sass-loader')
.tap(options => {
implementation: require('sass'),
sassOptions: {
indentedSyntax: true // optional
}
return options
})
}
})
However it doesn't work.
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,
}
}
})
I'm trying to control the filenaming of files produced from a Vue app with Webpack.
The environment where I want to host the built app doesn't like filenames with '.' (don't ask).
I have been able via get js files to comply with a 'hyphen' naming scheme by using output.filename in vue.config.js configureWebpack entry. But css files are not renamed.
As I am loading the two bulk packed files rather than chunks I can obviously manually rename the single css file. However when I run it I get an error
Error: Loading CSS chunk error failed.
(/my-path/resources/css/error.d0f9a634.css)
I'm hoping I can force all css files (including the error one) to be renamed by the build process.
My vue.config.js
module.exports = {
outputDir: path.resolve(__dirname, 'dist'),
publicPath: "/my-path/resources",
configureWebpack: {
optimization: {
splitChunks: false
},
output: {
filename: "[name]-js",
chunkFilename: "[name]-chunk-js",
// get cssFilename() {
// return "[name]-css";
// }
},
resolve: {
alias: {
'vue$': path.resolve('./node_modules/vue/dist/vue.common.js'),
},
},
},
// https://cli.vuejs.org/config/#productionsourcemap
productionSourceMap: false,
// https://cli.vuejs.org/config/#css-extract
css: {
extract: { ignoreOrder: true },
loaderOptions: {
sass: {
prependData: '#import \'~#/assets/scss/vuetify/variables\''
},
scss: {
prependData: '#import \'~#/assets/scss/vuetify/variables\';'
}
}
},
// ...
}
I have started to look at MiniCssExtractPlugin but not sure if that is the right direction to look. Any help appreciated.
I found a working solution for this via the css.extract element in vue.config.js.
configureWebpack: {
optimization: {
splitChunks: false
},
output: {
filename: "js/[name]-js",
chunkFilename: "js/[name]-chunk-js",
},
...
},
// https://cli.vuejs.org/config/#css-extract
css: {
extract: {
ignoreOrder: true,
filename: 'css/[name]-css',
chunkFilename: 'css/[name]-chunk-css',
},
loaderOptions: {
sass: {
prependData: '#import \'~#/assets/scss/vuetify/variables\''
},
scss: {
prependData: '#import \'~#/assets/scss/vuetify/variables\';'
}
}
},
...
Which as the documentation link for css.extract says
Instead of a true, you can also pass an object of options for the
mini-css-extract-plugin if you want to further configure what this
plugin does exactly
and is covered by the webpack mini-css-extract-plugin documentation
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 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.