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
Related
I have a large project that use tabs for indentation, but after some update I can't build the project anymore. Sass alway return the error "Syntax Error: SassError: Expected spaces, was tabs."
How can I configure Sass to use tabs insted os spaces in Vue 2? My vue.config.js:
const path = require('path')
module.exports = {
productionSourceMap: true,
configureWebpack: {
devtool: 'source-map',
resolve: {
alias: {
'#ui': path.resolve(__dirname, '../ui'),
}
},
},
css: {
loaderOptions: {
sass: {
sassOptions: {
indentType: 'tab',
indentWidth: 1
},
additionalData: `#import "../ui/style/_main.sass"`
},
scss: {
additionalData: `#import "../ui/style/_margins.scss";`,
sassOptions: {
indentType: 'tab',
indentWidth: 1
}
},
}
}
}
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,
}
I'm trying to setup a SASS structure in my Rollup config that would allow me to use variables throughout the application. I'd like to use postcss + autoprefixer. I've setup the following in my plugins array:
postcss({
modules: false,
extensions: ['.css', '.sass', '.scss'],
output: false,
extract: true,
plugins: [autoprefixer],
use: [
[
'sass', {
includePaths: [path.join(__dirname, 'scss')]
}
]
]
})
That works well, I'm able to import my SCSS files within my components ie. import "./App.scss";.
The problem I'm facing is I have a number of global variables declared in App.scss and I'd like to use those variables in components that are imported in children.
How would I go about doing that? I thought this plugin would resolve all the SCSS, concat then run postcss + SASS against it, but seems like that's not the case.
Adding my github comment here:
https://github.com/sveltejs/language-tools/issues/232#issuecomment-801549706
This worked for me:
svelte.config.js
module.exports = {
preprocess: autoPreprocess({
scss: { prependData: `#import 'src/styles/main.scss';`},
postcss: { plugins: [require('autoprefixer')] }
}),
#};
rollup.config.js
svelte({
dev: !production, // run-time checks
// Extract component CSS — better performance
css: css => css.write(`bundle.css`),
hot: isNollup,
preprocess: [
autoPreprocess({
scss: { prependData: `#import 'src/styles/main.scss';`},
postcss: { plugins: [postcssImport()] },
defaults: { style: 'postcss' }
})
]
}),
App.svelte
<style global lang="scss">
</style>
If you want the errors in terminal to go away on rollup.config.js
svelte({
dev: !production, // run-time checks
// Extract component CSS — better performance
css: css => css.write(`bundle.css`),
hot: isNollup,
preprocess: [
autoPreprocess({
scss: { prependData: `#import 'src/styles/main.scss';`},
postcss: { plugins: [postcssImport()] },
defaults: { style: 'postcss' }
})
],
onwarn: (warning, handler) => {
const { code, frame } = warning;
if (code === "css-unused-selector")
return;
handler(warning);
}
}),
The coolest thing is my main.scss file can import partials.
#import 'resets';
#import 'border_box';
#import 'colors';
#import 'fonts';
#import 'forms';
Documentation here: https://github.com/sveltejs/svelte-preprocess/blob/main/docs/getting-started.md
webpack.base.conf.js
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
scss: 'vue-style-loader!css-loader!sass-loader',
sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
}
}
},
{
loader: 'sass-resources-loader',
options: {
resources: path.resolve(__dirname, '../src/assets/scss/_variables.scss')
}
},
My "variables" file starts to load, but then i get this error:
Module parse failed: Unexpected character '#' (1:8)
You may need an appropriate loader to handle this file type.
| $white: #ffffff;
|
| // The Vue build version to load with the `import` command
I use this manual:
https://vue-loader-v14.vuejs.org/en/configurations/pre-processors.html
vue version: 2.93
Eventually i created project from scratch using vue-cli#3
and added to vue.config.js this code:
const path = require('path');
module.exports = {
chainWebpack: config => {
const oneOfsMap = config.module.rule('scss').oneOfs.store
oneOfsMap.forEach(item => {
item
.use('sass-resources-loader')
.loader('sass-resources-loader')
.options({
resources: [
path.resolve(__dirname, './src/assets/scss/_variables.scss'),
path.resolve(__dirname, './src/assets/scss/_mixins.scss'),
]
})
.end()
})
}
}
You might want to add it to a vue.config.js file in your root directory. If the file doesn't exist, create it and add something along the lines of this (my config):
module.exports = {
css: {
loaderOptions: {
sass: {
data: `
#import "#/assets/_variables.scss";
`
}
}
}
};