Question

我正在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依赖项，但是这无助于我弄清楚为什么现在一半的安装都能正常工作。任何帮助将不胜感激！

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

编码愉快！

Webpack无法拾取某些CSS文件

1 个答案: