极客观点
项目管理
HarmonyOS
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可以这样解析