I've created an app using the Vue CLI, which now abstracts Webpack config behind vue.config.js. I'm trying to extract my CSS to a styles.css file. Right now, it's extracting to randomly named files, like this:
dist\js\vendor.4ee179da.js 74.69 kb 26.68 kb dist\js\app.5e840ed0.js 4.06 kb 1.84 kb dist\css\app.4c22f75b.css 161.13 kb 21.59 kb
I suspect my css.extract needs to be an object, like
{
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
}
But adding this breaks the build with new _ValidationError2.default(ajv.errors, name).
Below is my vue.config.js:
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
// Project deployment base
// By default we assume your app will be deployed at the root of a domain,
// e.g. https://www.my-app.com/
// If your app is deployed at a sub-path, you will need to specify that
// sub-path here. For example, if your app is deployed at
// https://www.foobar.com/my-app/
// then change this to '/my-app/'
baseUrl: '/',
// where to output built files
outputDir: 'dist',
// whether to use eslint-loader for lint on save.
// valid values: true | false | 'error'
// when set to 'error', lint errors will cause compilation to fail.
lintOnSave: true,
// use the full build with in-browser compiler?
// https://v2.vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
compiler: false,
// generate sourceMap for production build?
productionSourceMap: true,
// tweak internal webpack configuration.
// see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
chainWebpack: () => {},
configureWebpack: () => {
new ExtractTextPlugin('assets/style.css')
},
// CSS related options
css: {
// extract CSS in components into a single CSS file (only in production)
// can also be an object of options to pass to extract-text-webpack-plugin
extract: true,
// Enable CSS modules for all css / pre-processor files.
// This option does not affect *.vue files.
modules: true,
// enable CSS source maps?
sourceMap: false,
// pass custom options to pre-processor loaders. e.g. to pass options to
// sass-loader, use { sass: { ... } }
loaderOptions: {
sass:{
css: 'css-loader',
'scss':'css-loader | sass-loader'
}
}
},
// use thread-loader for babel & TS in production build
// enabled by default if the machine has more than 1 cores
parallel: require('os').cpus().length > 1,
// options for the PWA plugin.
// see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
pwa: {},
// configure webpack-dev-server behavior
devServer: {
open: process.platform === 'darwin',
host: '0.0.0.0',
port: 8082,
https: false,
hotOnly: false,
// See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#configuring-proxy
proxy: null, // string | Object
before: app => {}
},
// options for 3rd party plugins
pluginOptions: {
// ...
}
}
Fixed it. Here is the proper way to do it. Under CSS, change extract to:
extract: {filename: 'styles.css'}
I kept the loaderOptions, sourceMap and modules objects in there, which seems to work fine.
Vue CLI 3 actually uses mini-css-extract-plugin
, not extract-text-webpack-plugin
.
When you are passing in extract: {filename: 'styles.css'}
you are actually configuring mini-css-extract-plugin
. You can see those docs here.
You can set the filename
for mini-css-extract-plugin
(docs). Here is where Vue is passing that in.
You should be able to remove all references to extract-text-webpack-plugin
and your code will continue to work fine!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With