热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

用elementui样式报错Unexpectedcharacter'@'事什么原因?

Error:Moduleparsefailed:E:WebstormProjectscqcp1.0node_moduleselement-uilibth

Error: Module parse failed: E:WebstormProjectscqcp1.0node_moduleselement-uilibtheme-defaultstep.css Unexpected character '@' (1:0)**
这是什么原因?



webpack.config.js
var path = require('path');
var webpack = require('webpack');

//用来抽离css的插件
const ExtractTextPlugin = require("extract-text-webpack-plugin");
//自动生成index.html
const HtmlWebpackPlugin = require('html-webpack-plugin');



module.exports = {

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
entry: {

    main : ["babel-polyfill",'./src/main.js'],

},

output: {

    libraryTarget: 'umd',

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

    //很关键 决定你打包后的静态资源是否能正确引用

    publicPath: 'dist/',

    filename: 'js/build.js'

},

//打包去除外部依赖

// externals: {

//     'vue': {

//         root: 'Vue',

//         commonjs: 'vue',

//         commonjs2: 'vue',

//         amd: 'vue'

//     },

//     'lodash': {

//         commonjs: 'lodash',

//         commonjs2: 'lodash',

//         amd: 'lodash',

//         root: '_'

//     },

// },

module: {

    rules: [

        {

            test: /\.vue$/,

            loader: 'vue-loader',

            options: {

                loaders: {

                    css: ExtractTextPlugin.extract({

                        use: 'css-loader',

                        fallback: 'vue-style-loader' // <- this is a dep of vue-loader, so no need to explicitly install if using npm3

                    })

                }

                // other vue-loader options go here

            }

        },

        {

            test: /\.js$/,

            loader: 'babel-loader',

            exclude: /node_modules/

        },

        {

            test: /\.(png|jpg|gif|svg)$/,

            loader: 'url-loader',

            options: {

                name: "image/[name].[ext]?[hash]",

                limit: 8192,



            }

        },

        {

            test: /\.(less|css)$/,

            exclude: /node_modules/,

            use: ExtractTextPlugin.extract({

                fallback: "style-loader",

                use: [

                    {loader: "css-loader"},

                    {loader: "less-loader"}

                ],

            })

        },

        {

            test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,

            loader: 'file-loader'

        },

        {

            test: /\.(png|jpe?g|gif|svg)(\?\S*)?$/,

            loader: 'file-loader',

            query: {

                name: '[name].[ext]?[hash]'

            }

        }



    ]

},

plugins: [



    new ExtractTextPlugin("css/styles.css"),

    new HtmlWebpackPlugin({

        title : "超群网络科技有限公司",

        template : "index.html",

        inject: true,

        hash : true

    })

],

resolve: {

    alias: {

        'vue$': 'vue/dist/vue.esm.js',

        'vue-router$':'vue-router/dist/vue-router.common.js',

        'vue-resource$':'vue-resource/dist/vue-resource.common.js',

        'vuex':'vuex/dist/vuex.js',

    }

},

devServer: {

    historyApiFallback: true,

    noInfo: true

},

performance: {

    hints: false

},

//最完整的map信息 速度一般

devtool: '#source-map'

// 开发环境使用

// devtool: '#eval-source-map'

//速度最快,大型项目使用节省时间,但是js调试不方便

// devtool: '#cheap-module-source-map'

};

if (process.env.NODE_ENV === 'production') {

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
module.exports.devtool = '#source-map';

// http://vue-loader.vuejs.org/en/workflow/production.html

module.exports.plugins = (module.exports.plugins || []).concat([

    new webpack.DefinePlugin({

        'process.env': {

            NODE_ENV: '"production"'

        }

    }),

    new webpack.optimize.UglifyJsPlugin({

        sourceMap: true,

        compress: {

            warnings: false

        }

    }),

    new webpack.LoaderOptionsPlugin({

        minimize: true

    })

])

}
完整的错误提示:
ERROR in ./~/element-ui/lib/theme-default/row.css
Module parse failed: D:ideaprojectcqcomponentnode_moduleselement-uilibtheme-defaultrow.css Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
| @charset "UTF-8";.el-row:after,.el-row:before{display:table;content:""}.el-row:after{clear:both}.el-row{position:relative;box-sizing:border-box}.el-row--flex{display:-ms-flexbox;display:flex}.el-row--flex:after,.el-row--flex:before{display:none}.el-row--flex.is-
align-bottom{-ms-flex-align:end;align-items:flex-end}.el-row--flex.is-align-middle{-ms-flex-align:center;align-items:center}.el-row--flex.is-justify-space-around{-ms-flex-pack:distribute;justify-content:space-around}.el-row--flex.is-justify-space-between{-ms-flex-
pack:justify;justify-content:space-between}.el-row--flex.is-justify-end{-ms-flex-pack:end;justify-content:flex-end}.el-row--flex.is-justify-center{-ms-flex-pack:center;justify-content:center}
@ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/login.vue 18:0-61
@ ./src/components/login.vue
@ ./src/main.js
@ multi babel-polyfill ./src/main.js


   



推荐阅读
  • UNP 第9章:主机名与地址转换
    本章探讨了用于在主机名和数值地址之间进行转换的函数,如gethostbyname和gethostbyaddr。此外,还介绍了getservbyname和getservbyport函数,用于在服务器名和端口号之间进行转换。 ... [详细]
  • 前言--页数多了以后需要指定到某一页(只做了功能,样式没有细调)html ... [详细]
  • Splay Tree 区间操作优化
    本文详细介绍了使用Splay Tree进行区间操作的实现方法,包括插入、删除、修改、翻转和求和等操作。通过这些操作,可以高效地处理动态序列问题,并且代码实现具有一定的挑战性,有助于编程能力的提升。 ... [详细]
  • 题目描述:给定n个半开区间[a, b),要求使用两个互不重叠的记录器,求最多可以记录多少个区间。解决方案采用贪心算法,通过排序和遍历实现最优解。 ... [详细]
  • 导航栏样式练习:项目实例解析
    本文详细介绍了如何创建一个具有动态效果的导航栏,包括HTML、CSS和JavaScript代码的实现,并附有详细的说明和效果图。 ... [详细]
  • CentOS7源码编译安装MySQL5.6
    2019独角兽企业重金招聘Python工程师标准一、先在cmake官网下个最新的cmake源码包cmake官网:https:www.cmake.org如此时最新 ... [详细]
  • 使用 Azure Service Principal 和 Microsoft Graph API 获取 AAD 用户列表
    本文介绍了一段通用代码示例,该代码不仅能够操作 Azure Active Directory (AAD),还可以通过 Azure Service Principal 的授权访问和管理 Azure 订阅资源。Azure 的架构可以分为两个层级:AAD 和 Subscription。 ... [详细]
  • 本文探讨了 Objective-C 中的一些重要语法特性,包括 goto 语句、块(block)的使用、访问修饰符以及属性管理等。通过实例代码和详细解释,帮助开发者更好地理解和应用这些特性。 ... [详细]
  • 题目Link题目学习link1题目学习link2题目学习link3%%%受益匪浅!-----&# ... [详细]
  • 本文详细探讨了VxWorks操作系统中双向链表和环形缓冲区的实现原理及使用方法,通过具体示例代码加深理解。 ... [详细]
  • 本文详细探讨了KMP算法中next数组的构建及其应用,重点分析了未改良和改良后的next数组在字符串匹配中的作用。通过具体实例和代码实现,帮助读者更好地理解KMP算法的核心原理。 ... [详细]
  • 本文详细介绍了Java中org.neo4j.helpers.collection.Iterators.single()方法的功能、使用场景及代码示例,帮助开发者更好地理解和应用该方法。 ... [详细]
  • 本文将介绍如何编写一些有趣的VBScript脚本,这些脚本可以在朋友之间进行无害的恶作剧。通过简单的代码示例,帮助您了解VBScript的基本语法和功能。 ... [详细]
  • 本文详细介绍如何使用Python进行配置文件的读写操作,涵盖常见的配置文件格式(如INI、JSON、TOML和YAML),并提供具体的代码示例。 ... [详细]
  • 本文详细介绍了如何解决Uploadify插件在Internet Explorer(IE)9和10版本中遇到的点击失效及JQuery运行时错误问题。通过修改相关JavaScript代码,确保上传功能在不同浏览器环境中的一致性和稳定性。 ... [详细]
author-avatar
拍友2502940977
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有