webpack导入css到html,使用webpack将样式表链接动态添加到html中

我相信这个webpack配置应该可以解决您的问题。

const path = require('path');

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {

entry: './src/index.js',

output: {

filename: 'bundle.js',

path: path.resolve(__dirname, 'dist'),

},

plugins: [

new HtmlWebpackPlugin({

template: './src/index.html',

}),

new MiniCssExtractPlugin({

filename: '[name].css',

}),

],

module: {

rules: [

{

test: /\.scss$/,

use: [

{ loader: MiniCssExtractPlugin.loader },

'css-loader',

'sass-loader'

],

},

],

},

};

当我试图回答相同的问题时，让我理解的重要部分是规则和插件的顺序在webpack中很重要。 (webpack首先处理每个数组中的最后一个项目，然后继续直到到达第一个项目为止。此post支持这一点，以及Sean Larkin的前端大师教程。)

在这种情况下，您需要在插件数组中的“ HtmlWebpackPlugin”之后添加“ MiniCSSExtractPlugin”。

当然，您还需要在/ src文件夹中包含sass文件和index.js文件，并且index.js中包含import './style.scss'-在/中还需要index.html如果您要像在配置文件中那样对HtmlWebpackPlugin使用模板选项，请使用src。总共应该输出一个main.css文件，bundle.js文件和一个带有链接和脚本标签的index.html，它们都在“ dist”文件夹中。

希望有帮助！ ：)