Vuejs 2.5+ 和 Webpack 4+ 无法加载 CSS 文件

Question

我目前正在尝试设置一个使用webpack 4的基本Vue项目。 Vue框架基于Microsoft SPA模板dotnet core构建。似乎一切都正常运行，但是外部CSS文件未能正确加载进入项目中。这个问题困扰了我很长时间，并且让我一直在思考这些CSS文件为什么没有加载。

我所做的基本上就是使用命令'dotnet new vue'（需要安装Microsoft SPA模板），然后在创建项目后开始更新软件包。目前，我有以下package.json文件：

{
  "name": "Dashboard",
  "private": true,
  "version": "0.0.1",
  "scripts": {
    "build:development": "webpack"
  },
  "devDependencies": {
    "@types/webpack-env": "^1.13.6",
    "ajv": "^6.5.2",
    "aspnet-webpack": "^3.0.0",
    "awesome-typescript-loader": "^5.2.0",
    "bootstrap": "^4.1.1",
    "coa": "^2.0.1",
    "css-loader": "^1.0.0",
    "event-source-polyfill": "^0.0.12",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^1.1.11",
    "isomorphic-fetch": "^2.2.1",
    "jquery": "^3.3.1",
    "mini-css-extract-plugin": "^0.4.1",
    "popper.js": "^1.14.3",
    "style-loader": "^0.21.0",
    "typescript": "^2.9.2",
    "url-loader": "^1.0.1",
    "vue": "^2.5.16",
    "vue-loader": "^15.2.4",
    "vue-property-decorator": "^7.0.0",
    "vue-router": "^3.0.1",
    "vue-style-loader": "^4.1.0",
    "vue-template-compiler": "^2.5.16",
    "webpack": "^4.16.0",
    "webpack-cli": "^3.0.8",
    "webpack-dev-middleware": "^3.1.3",
    "webpack-hot-middleware": "^2.22.2",
    "webpack-merge": "^4.1.3",
    "webpack-node-externals": "^1.7.2"
  },
  "dependencies": {}
}

这是我的webpack配置文件：

const path = require('path');
const webpack = require('webpack');
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
const bundleOutputDir = './wwwroot/dist';
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
    mode: 'development',
    stats: {
        modules: false
    },
    context: __dirname,
    resolve: {
        extensions: [ '.js', '.ts' ]
    },
    entry: {
        'main': './ClientApp/boot.ts'
    },
    module: {
        rules: [
            {
                test: /\.vue\.html$/,
                include: /ClientApp/,
                loader: 'vue-loader',
                options: { loaders: { js: 'awesome-typescript-loader?silent=true' } }
            },
            {
                test: /\.ts$/,
                include: /ClientApp/,
                use: 'awesome-typescript-loader?silent=true'
            },
            { 
                test: /\.css$/,
                use: ['vue-style-loader', 'css-loader']
            },
            {
                test: /\.(png|jpg|jpeg|gif|svg)$/,
                use: 'url-loader?limit=25000'
            }
        ]
    },
    output: {
        path: path.join(__dirname, bundleOutputDir),
        filename: '[name].js',
        publicPath: 'dist/'
    },
    plugins: [
        new VueLoaderPlugin(),
        new CheckerPlugin(),
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"development"'
            }
        }),
        new webpack.DllReferencePlugin({
            context: __dirname,
            manifest: require('./wwwroot/dist/vendor-manifest.json')
        }),
        new webpack.SourceMapDevToolPlugin({
            filename: '[file].map',
            moduleFilenameTemplate: path.relative(bundleOutputDir, '[resourcePath]')
        })
    ]
};

我已经按以下方式将CSS文件包含在其中：

在app.ts中（我添加了它们只是为了测试）：

import '../navmenu/navmenu.css';
require('../navmenu/navmenu.css');

在boot.ts中。

import './components/navmenu/navmenu.css';
require('./components/navmenu/navmenu.css');

或者在原始文件中（navmenu.vue.html）（当生成了默认的单页应用程序骨架时）：

<style src="./navmenu.css" />

在所有这些位置上，CSS文件都没有被包含/在前端中使用。我也尝试了不同的方法在webpack.config文件中，例如使用extract-text-webpack-plugin。

基本思路是Microsoft的SPA模板使用Webpack 2（以及其他不同软件包的旧版本），而我正在尝试将它们更新到最新版本。

希望有人能帮助我解决问题 :-)

- Michiel Peeters

Answer 1

我已经解决了。一些webpack 4不能自动获取CSS文件。您需要先安装以下插件：

MiniCssExtractPlugin

之后，在webpack配置中添加以下配置：

    { 
        test: /\.(s*)[a|c]ss$/,
        use: [
            "vue-style-loader",
            MiniCssExtractPlugin.loader,
            "css-loader",
            "sass-loader"
        ]
    }

在插件部分还需要添加mini css extract插件:

new MiniCssExtractPlugin({
    filename: "[name].css"
})

然后你就可以开始了！

- Michiel Peeters

Answer 2

在您的 main.vue 或任何 vue 页面中，可以在 style 中添加 @import "path"。

<style>
@import "https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css";
@import "../assests/css/style.css"
</style>

- Krishna

---

首先感谢您的回复，其次您提出的建议并没有奏效。我已经添加了一个 GitHub 存储库，以便您能够下载并运行它，希望您能帮助我解决问题 :-）。谢谢！ - Michiel Peeters