的WebPack模塊解析失敗意外的字符「@」

我與VUE-CLI工作，後main.js導入CSS文件，的WebPack模塊解析失敗意外的字符「@」

import Vue from 'vue' 
import App from './App.vue' 
import 'element-ui/lib/theme-default/index.css' 
import ElementUI from 'element-ui' 


Vue.use(ElementUI); 

new Vue({ 
    el: '#app', 
    render: h => h(App) 
})

控制檯登錄錯誤，無法呈現

VM818:1Uncaught Error: Module parse failed: C:\02-folks\new-version\vueproject\fademo01\[email protected]\lib\theme-default\index.css Unexpected character '@'...

我已經安裝了風格裝載機和CSS裝載機這裏是的package.json文件

{ 
"name": "fademo01", 
    "description": "A Vue.js project", 
    "author": "", 
    "private": true, 
    "scripts": { 
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --inline --hot", 
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 
    }, 
    "dependencies": { 
    "vue": "^2.0.1" 
    }, 
    "devDependencies": { 
    "babel-core": "^6.0.0", 
    "babel-loader": "^6.0.0", 
    "babel-preset-es2015": "^6.0.0", 
    "cross-env": "^3.0.0", 
    "css-loader": "^0.25.0", 
    "element-ui": "^1.0.2", 
    "file-loader": "^0.9.0", 
    "style-loader": "^0.13.1", 
    "vue-loader": "^9.7.0", 
    "webpack": "^2.1.0-beta.25", 
    "webpack-dev-server": "^2.1.0-beta.0" 
    } 
}

個webpack.config.js

var path = require('path') 
var webpack = require('webpack') 

module.exports = { 
    entry: './src/main.js', 
    output: { 
    path: path.resolve(__dirname, './dist'), 
    publicPath: '/dist/', 
    filename: 'build.js' 
    }, 
    module: { 
    rules: [ 
     { 
     test: /\.vue$/, 
     loader: 'vue-loader', 
     options: { 
      // vue-loader options go here 
     } 
     }, 
     { 
     test: /\.js$/, 
     loader: 'babel-loader', 
     exclude: /node_modules/ 
     }, 
     { 
     test: /\.css$/, 
     loader: 'css-loader', 
     exclude: /node_modules/ 
     }, 
     { 
     test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/, 
     loader: 'file-loader' 
     }, 
     { 
     test: /\.(png|jpg|gif|svg)$/, 
     loader: 'file-loader', 
     options: { 
      name: '[name].[ext]?[hash]' 
     } 
     } 
    ] 
    }, 
    resolve: { 
    alias: { 
     'vue$': 'vue/dist/vue' 
    } 
    }, 
    devServer: { 
    historyApiFallback: true, 
    noInfo: true 
    }, 
    devtool: '#eval-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 
    }) 
    ]) 
}

來源

2016-11-21 W.Sun

我不得不做的幾件事情：

npm install style-loader --save

我還缺少一些條目webpack.config.js

module: 
... 
     { 
     test: /\.css$/, 
     loader: 'style-loader!css-loader' 
     }, 
     { 
     test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/, 
     loader: 'file-loader' 
     },

這些webpack.config.js項中記錄元素-ui文檔的Quick Start。

來源

2017-01-17 20:38:48 Skyguard

的ConfigEd CSS我的工作了：從元素中刪除以下行中webpack.config.js module.rules的CSS配置

{ 
    test: /\.css$/, 
    loader: 'css-loader', 
    exclude: /node_modules/ //remove this line 
    },

來源

2016-11-21 10:48:04

你需要重新啓動webpack-dev-server！我也遇到了翻譯軟件的這個問題給你答覆。

來源

2016-12-16 06:00:17

謝謝，是的，我添加了css加載器並重新啓動了dev服務器。 –

的WebPack模塊解析失敗意外的字符「@」

回答

相關問題