My development stack includes Vue.js 2.5.15, Webpack 4.12.0, css-loader 0.28.11, ASP.Net Core 2.1 in Visual Studio 2017.
Starting with the Visual Studio asp.net core template project for Vue and Typescript, I prefer to have individual small CSS files within each component folder under ClientApp. This way, all .vue, .ts, and .css files are located together.
However, I encountered a situation where only some of the CSS files were included in Main.js when running the app. I am trying to figure out why some CSS files in these subfolders are included while others are not, even though they are referenced in the same way. Here are more details about my setup:
Folder structure: Component Folder Structure Example
NPM packages: NPM Packages
webpack.config.js:
const path = require('path');
const webpack = require('webpack');
const VueLoader = require('vue-loader');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const bundleOutputDir = './wwwroot/dist';
module.exports = (env) => {
const isDevBuild = !(env && env.prod);
return [{
stats: { modules: false },
context: __dirname,
entry: { 'main': './ClientApp/boot.ts' },
mode: "development",
module: {
rules: [
{ test: /\.vue$/, include: /ClientApp/, loader: 'vue-loader', options: { loaders: { js: 'ts-loader' } } },
{ test: /\.ts$/, include: /ClientApp/, use: 'ts-loader' },
{ test: /\.css$/, use: isDevBuild ? [ 'style-loader', 'css-loader' ] : ExtractTextPlugin.extract({ use: 'css-loader?minimize' }) },
{ test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
]
},
resolve: {
extensions: ['.js', '.ts'],
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
output: {
path: path.join(__dirname, bundleOutputDir),
filename: '[name].js',
publicPath: 'dist/'
},
plugins: [
new VueLoader.VueLoaderPlugin(),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(isDevBuild ? 'development' : 'production')
}
}),
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./wwwroot/dist/vendor-manifest.json')
})
].concat(isDevBuild ? [
// Plugins that apply in development builds only
new webpack.SourceMapDevToolPlugin({
filename: '[file].map',
moduleFilenameTemplate: path.relative(bundleOutputDir, '[resourcePath]')
})
] : [
// Plugins that apply in production builds only
new webpack.optimize.UglifyJsPlugin(),
new ExtractTextPlugin('site.css')
])
}];
};
The generated main.js file in my dist folder includes the CSS for 'settings' but not for 'monkeys'. I'm wondering why this inconsistency exists?
Monkeys.vue:
<template>
<div id="monkeys-container">
I love monkeys!!!!!!!!
</div>
</template>
<style src="./monkeys.css"></style>
<script src="./monkeys.ts"></script>
<!--<style>
@import './monkeys.css';
</style>-->
In settings.vue:
<template>
<div id="settings-container">
<grid v-if="settingsloaded" v-bind:headernames="headernames" v-bind:coltypes="coltypes" v-bind:datarows="datarows"></grid>
<div v-else>{{ message }}</div>
</div>
</template>
<style src="./settings.css"></style>
<script src="./settings.ts"></script>
I would appreciate any insights on why webpack is behaving inconsistently in including CSS files without adding any additional npm packages. Although I can use import statements in boot.ts to manually add each CSS dependency, understanding this issue would be beneficial in improving my current setup. Any help offered would be greatly appreciated!