vue.js - 用element-ui 样式报错 Unexpected character '@' 事什么原因？

问题描述

问 题

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 = {

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') {

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

解决方案

你的css 是否是也用了less的语法了！ css不应该这样被解析 test: /.(less|css)$/,只能less可以这样解析

这篇关于vue.js - 用element-ui 样式报错 Unexpected character '@' 事什么原因？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！