Webpack 4.6无法使用bootstrap 4.1进行渲染

时间:2018-05-17 17:14:52

标签: asp.net-mvc webpack asp.net-core bootstrap-4 font-awesome

我在ASP.NET Core 2中有一个项目,并设置了WebPack(见下文)。在下面的示例中构建bundle.jsmain.js)后,一切似乎都没问题,但网站无效(检查元素,根本没有CSS)。

的package.json

{
    "version": "1.0.0",
    "name": "cloudcrm",
    "private": true,
    "scripts": {
    "dev": "webpack --mode development ./src/main.js --output ./wwwroot/dist/main.js",
    "build": "webpack --mode production ./src/main.js --output ./wwwroot/dist/main.js"
},
"devDependencies": {
    "css-loader": "^0.28.11",
    "file-loader": "^1.1.11",
    "style-loader": "^0.21.0",
    "url-loader": "^1.0.1",
    "webpack": "^4.6.0",
    "webpack-cli": "^2.1.3"
},
"dependencies": {
    "bootstrap": "^4.1.0",
    "chart.js": "2.7.1",
    "datatables.net-bs4": "1.10.16",
    "font-awesome": "4.7.0",
    "jquery": "3.3.1",
    "jquery.easing": "^1.4.1",
    "popper.js": "^1.14.3"
}

webpack.config.js

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                loader: "url-loader",
                options: {
                    prefix: "font",
                    limit: 10000,
                    mimetype: "application/octet-stream"
                }
            }
        ]
    },
};

main.js

import './css/site.css';
import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'jquery';
import 'font-awesome/css/font-awesome.css';
import 'chart.js';
import 'jquery.easing';
import 'datatables.net-bs4';

enter image description here

0 个答案:

没有答案