Vuejs 2.5+ Webpack 4+ 不加载 CSS 文件答案

【问题标题】：Vuejs 2.5+ Webpack 4+ not loading CSS filesVuejs 2.5+ Webpack 4+ 不加载 CSS 文件
【发布时间】：2018-12-21 21:10:20
【问题描述】：

目前我正在尝试设置一个启用 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.config.file:

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）中（当已经生成了默认的SPA骨架时）：

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

在所有这些位置，css 文件均未包含/在前端中使用。我还在 webpack.config 文件中尝试了不同的方法，例如使用 extract-text-webpack-plugin。

背后的基本思想是微软的 SPA 模板使用的是 Webpack 2（以及其他不同包的旧版本），我正在尝试将这些更新到最新版本。

希望有人可以帮助我:-)

【问题讨论】：

标签： css webpack vue.js .net-core

【解决方案1】：

在你的 main.vue 或任何 vue 页面的样式中添加 @import "path"

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

【讨论】：

首先感谢您的回复，其次您的建议没有奏效。我添加了一个 github 存储库，因此您可以下载并运行它，希望能帮助我:-)。谢谢！

【解决方案2】：

我想通了。不知何故，webpack 4 本身并没有拾取 CSS 文件。您需要先安装以下插件：

MiniCssExtractPlugin

然后在 webpack 配置中添加以下配置：

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

并将迷你 css 提取插件也添加到插件部分：

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

你应该很高兴！

【讨论】：