使用element-ui报错 Unexpected character '@'

哈雷路亚 发布于 2017/08/07 11:24
阅读 2K+
收藏 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]'
                }
            },
            {
                test: /\\.css$/,
                loader: "style!css"

            }


        ]
    },
    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
        })
    ])
}

package.json文件

{
  "name": "cqcomponent",
  "description": "A Vue.js project",
  "version": "1.0.0",
  "author": "wxh <1005853010@qq.com>",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "vue": "^2.3.3",
    "vue-resource": "^1.3.4",
    "vue-router": "^2.7.0",
    "vuex": "^2.3.1",
    "element-ui": "^1.4.1"
  },
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-eslint": "^7.2.3",
    "babel-loader": "^6.4.1",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-polyfill": "^6.23.0",
    "babel-preset-env": "^1.5.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "cross-env": "^3.0.0",
    "css-loader": "^0.25.0",
    "element-ui": "^1.4.1",
    "extract-text-webpack-plugin": "^2.1.2",
    "file-loader": "^0.9.0",
    "html-webpack-plugin": "^2.30.1",
    "less": "^2.7.2",
    "less-loader": "^4.0.5",
    "style-loader": "^0.18.2",
    "url-loader": "^0.5.9",
    "vue-loader": "^12.1.0",
    "vue-template-compiler": "^2.3.3",
    "vuex": "^2.3.1",
    "webpack": "^2.7.0",
    "webpack-dev-server": "^2.6.1"
  }
}

那里配置 有问题啊

ERROR in ./~/element-ui/lib/theme-default/button.css
Module parse failed: D:\ideaproject\cqcomponent\node_modules\element-ui\lib\theme-default\button.css Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
 

加载中
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部
返回顶部
顶部