首页 > 其他分享 >vue2.0引入css文件后报错

vue2.0引入css文件后报错

时间:2022-11-07 18:02:28浏览次数:79  
标签:vue js webpack 报错 css test loader vue2.0


vue2.0的main.js中引入css文件后报错。
报错示例:

Uncaught Error: Module parse failed: /Users/**/Desktop/vue2/node_modules/.1.0.0-rc.5@element-ui/lib/theme-default/index.css Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.

因为webpack 打包的时候无法识别并转换成 js,所以就需要配置才能读取 css 和字体文件,运行命令安装下面三个东西(如果之前安装过就不需要了)

npm install style-loader --save-dev
npm install css-loader --save-dev
npm install file-loader --save-dev

在 webpack.config.js 中的 loaders 数组加入以下配置,记得该加逗号的地方加逗号!

{
test: /\\\\\\\\.css$/,
loader: "style!css"
},
{
test: /\\\\\\\\.(eot|woff|woff2|ttf)([\\\\\\\\?]?.*)$/,
loader: "file"
}

修改完的 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'
},
resolveLoader: {
root: path.join(__dirname, 'node_modules'),
},
module: {
loaders: [
{
test: /\\\\\\\\.vue$/,
loader: 'vue'
},
{
test: /\\\\\\\\.js$/,
loader: 'babel',
exclude: /node_modules/
},
{
test: /\\\\\\\\.css$/,
loader: "style!css"
},
{
test: /\\\\\\\\.(eot|woff|woff2|ttf)([\\\\\\\\?]?.*)$/,
loader: "file"
},
{
test: /\\\\\\\\.(png|jpg|gif|svg)$/,
loader: 'file',
query: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {vue: 'vue/dist/vue.js'}
},
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({
compress: {
warnings: false
}
})
])
}


标签:vue,js,webpack,报错,css,test,loader,vue2.0
From: https://blog.51cto.com/u_15867142/5830352

相关文章

  • 解决gedit报错无法打开的问题
    彻底解决关于gedit的Unabletoinitserver:无法连接:拒绝连接_BD_Marathon的博客-CSDN博客_unabletoinitserver:无法连接:拒绝连接需要在root下执行才有用  ......
  • 日常常用css样式大全,超出隐藏,不换行,省略号,两行超出隐藏,不换行,省略号,CSS中划线(删除
    文字去掉默认抛边line-height:1;超出隐藏,不换行,省略号overflow:hidden;  //超出的文本隐藏text-overflow:ellipsis;  //溢出用省略号显示white-space:nowrap;......
  • 【每日一练】26—CSS实现响应式卡片悬停效果
    今天练习的这个小项目,是一个产品卡片式的介绍说明,像我们在一些个人简历产品说明里或者产品说明里会经常使用这样的内容设计,然后再配上合适的图片即可。例如,我们在个人简历上......
  • 【每日一练】19—CSS 实现撕纸的效果
    写在前面今天我们来练习一个CSS实现的撕纸效果,这个效果,也会在一些设计网站上经常看到,但是这个用PS可以直接做成一张图片,但是,今天我们用CSS通过两张图片就实现了,这样做的好处......
  • 【每日一练】20—CSS实现文字动画效果
    写在前面今天来到了我们的第20个小项目的练习,距离我们100个小项目的练习,我们已经完成了五分之一了,剩下的五分之四,我们一起加油练习。今天练习的这个小项目是一个CSS实现的文......
  • 【每日一练】21—CSS实现炫酷动画背景
    今天分享的这个小练习,我们在视频号上分享过,具体效果请看下面的视频:因为在视频号的后台,有小伙伴留言说,想要这个案例的源码,所以,今天就把这个源码也分享出来了,有兴趣的小伙伴可......
  • Git推送报错:remote: Support for password authentication was removed on August 13,
    根据账号密码校验时,推送失败,报错如图官方日志:从2021年8月13日开始,我们将在对Git操作进行身份验证时不再接受帐户密码,并将要求使用基于令牌(token)的身份验证官方......
  • HTML,CSS,JavaScript的介绍
    网页组成:HTML,CSS,JavaScript:Html相当于骨架,Css相当于皮肤,JavaScript相当于肌肉三者结合起来形成完善的网页HTML超文本标记语言(hypertextmarkuplanguage)决定网......
  • css通用效果代码
    1.小米的hover上移效果&:hover{-webkit-box-shadow:015px30pxrgba(0,0,0,.1);box-shadow:015px30pxrgba(0,0,0,.1)......
  • 请求接口报错blocked:other
    问题描述:请求后端接口的时候一直报错:Status(blocked:other)原因:可能是浏览器安装了某些广告拦截的插件导致的,你的接口刚好触发了它的拦截规则,比如ad...开头等等。解......