Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
2.2k views
in Technique[技术] by (71.8m points)

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样式的错,有前辈们遇到过一样的情况吗
image.png


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)
  1. style-loader 和 MiniCssExtractPlugin.loader 一起使用会不会有问题,一个是把 CSS 插入到 DOM 中,另一个是提取 CSS 到样式文件。
  2. 引入 Iview 的样式直接在 main.js 引入就可以了把 import 'view-design/dist/styles/iview.css';

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...