url('其他的css文件')
想引入几个css文件就用几个@import
url
注意路径的的书写
首页需要两个css文件index.css和common.css
就在index.css的首行写入(两个css文件在同一个目录下)
@import
url('common.css')
这样只需要在首页链接一个index.css文件就可以了。
文档里明确给出了输出到1个文件的配置示例
const MiniCssExtractPlugin = require("mini-css-extract-plugin")module.exports = {
optimization: {
splitChunks: {
cacheGroups: {
styles: {
name: 'styles',
test: /\.css$/,
chunks: 'all',
enforce: true
}
}
}
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
})
],
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader"
]
}
]
}
}
你的写法和示例几乎完全一样。问题在于你要改文件名时造成的问题。你修改了cacheGroup的name，那个name其实是cacheGroup的ID，和CSS没关系。所以你要修改的是plugins下的filename
plugins: [new MiniCssExtractPlugin({
filename: "[name].css", // 这里修改成filename: "main.css"
})
],
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表：1、外部样式表当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观；
例如：
2、内部样式表当单个文件需要特别样式时，就可以使用内部样式表。你可以在
head
部分通过
标签定义内部样式表；
例如：<style
type="text/css">body
{background-color:
red}p
{margin-left:
20px}
3、内联样式当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何
CSS
属性。以下实例显示出如何改变段落的颜色和左外边距。
例如：
This
is
a
paragraph
