Webpack 没有拾取一些 CSS 文件答案

【问题标题】：Webpack not picking up some CSS filesWebpack 没有拾取一些 CSS 文件
【发布时间】：2018-12-01 09:50:18
【问题描述】：

我在 Visual Studio 2017 中使用 Vue.js 2.5.15、Webpack 4.12.0、css-loader 0.28.11、ASP.Net Core 2.1。

我从 Vue 和 Typescript 的 Visual Studio asp.net 核心模板项目开始。我的首选方法是在 ClientApp 下的每个组件文件夹中放置单独的较小 css 文件。这样 .vue、.ts 和 .css 文件就可以彼此相邻了。

但是，当我运行应用程序时，只有一些 css 文件将其放入 Main.js。我想弄清楚为什么 - 使用完全相同的设置 - 这些子文件夹中的一些 css 文件被包含在内，而有些则没有。据我所知，就它们的引用方式而言，一切都是相同的，但有些 css 文件只是拒绝被拾取。以下是有关我的设置的更多详细信息：

文件夹结构：Component Folder Structure Example

NPM 包：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', // Remove this line if you prefer inline source maps
                moduleFilenameTemplate: path.relative(bundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
            })
        ] : [
            // Plugins that apply in production builds only
            new webpack.optimize.UglifyJsPlugin(),
            new ExtractTextPlugin('site.css')
        ])
    }];
};

在我的 dist 文件夹中生成的 main.js 中，包含“设置”的 css，但不包含“猴子”的 css。有人知道为什么会这样吗？

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>-->

在 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>

理想情况下，我不想包含任何其他 npm 包，我只想了解为什么 webpack 不一致。作为一种解决方法，我可以在 boot.ts 顶部使用 import 语句来手动导入每个 css 依赖项，但这并不能帮助我弄清楚为什么我的一半设置目前有效。任何帮助将不胜感激！

【问题讨论】：

标签： css typescript webpack vue.js css-loader

【解决方案1】：

我最终放弃了上述方法，转而使用 Vue cli 3。这有助于使用最新的依赖项构建 Vue 项目，并消除对尽可能多的配置文件的需求。它还包括对使用 TypeScript 的 Vue 项目的内置支持。

我还从 Visual Studio 2017 迁移到 Visual Studio Code。现在我正在使用 .vue 文件，其中所有 html、typescript 和 css 都在每个组件的单个文件中。好多了！

总结一下，我推荐使用 vue-cli-3：https://cli.vuejs.org/

还有 Visual Studio Code，而不是完整的 Visual Studio。

编码愉快！

【讨论】：