webpack. mini-css-extract-plugin ivew样式失败
// 修改 webppack 配置文件后需重启才能生效const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const CopyPlugin = require('copy-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: {
main: './src/main',
vendors: './src/vendors'
},
output: {
path: path.join(__dirname, '../dist/assets'), // 输出文件所在目录
},
module: {
rules: [
{
test: /.vue$/,
use: [
{
loader: 'vue-loader'
},
{
loader: 'iview-loader',
options: {
prefix: false
}
}
]
},
{
test: /.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPaht: '../'
}
},
'style-loader', // 为 css 创建 style 标签并置入其中插入页面
'css-loader', // 处理 css
'postcss-loader', // 浏览器兼容问题
],
include:[
/src/,
'/node_modules/view-design/dist/styles/iview.css'
]
},
{
test: /.less$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPaht: '../'
}
},
'style-loader',
'css-loader',
'postcss-loader',
'less-loader' // loader 由下往上依次开始处理
]
},
{
test: /.js$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['env']
}
}
]
},
// 管理字体文件
{
test: /.(woff|woff2|eot|ttf|otf)$/,
use: [
{
loader: 'file-loader',
options: {
name: 'img/[name].[hash:8].[ext]'
}
}
]
},
{
test: /.(gif|jpg|png|woff|svg|eot|ttf)??.*$/,
loader: 'url-loader?limit=1024'
},
{
test: /.(html|tpl)$/,
loader: 'html-loader'
},
{
test: require.resolve('numbro'),
loader: 'expose-loader?numbro'
},
{
test: require.resolve('moment'),
loader: 'expose-loader?moment'
},
{
test: require.resolve('pikaday'),
loader: 'expose-loader?Pikaday'
},
{
test: require.resolve('zeroclipboard'),
loader: 'expose-loader?ZeroClipboard'
}
]
},
resolve: {
extensions: ['.js', '.vue'],
alias: {
'vue': 'vue/dist/vue.esm.js'
}
},
plugins: [
// Vue-loader在15.*之后的版本都是 vue-loader的使用都是需要伴生 VueLoaderPlugin的
new VueLoaderPlugin(),
new CopyPlugin({
patterns: [
{
from: './src/resource',
to: './resource'
}, {
from: './src/images',
to: './images'
}, {
from: './src/api.js',
to: './'
}
],
}),
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: "[name].css",
chunkFilename: "[id].css"
})
]
}
在使用MiniCssExtractPlugin之后启动项目就报ivew样式的错，有前辈们遇到过一样的情况吗
回答
- style-loader 和 MiniCssExtractPlugin.loader 一起使用会不会有问题，一个是把 CSS 插入到 DOM 中，另一个是提取 CSS 到样式文件。
- 引入 Iview 的样式直接在 main.js 引入就可以了把 import 'view-design/dist/styles/iview.css';
以上是 webpack. mini-css-extract-plugin ivew样式失败 的全部内容， 来源链接： utcz.com/a/43422.html
