It's no longer allowed to omit the '-loader' suffix when using loaders.

这是在学习vue2中,遇到的第一个bug,查了网上的文档,都是说加一下-loader后缀即可,可还是没有解决,痛定思痛,找了大神,终于解决了这个问题,分享给大家。
网友解答:

webpack.config.js文件
modules模块下
     loaders: [
           {test: /\.css$/, 
            loader: 'style-loader!css-loader'}//2.0貌似不支持缩写了
        ]

解决方法:
1)重装 style-loader和css-loader文件(若喜欢用Less,也可以同时按照less-loader)

//命令行
npm install --save-dev css-loader //重装css-loader,记住版本号
npm install style-loader --save-dev //重装style-loader,记住版本号
npm install --save-dev less-loader less //重装less-loader,记住版本号
//安装Less,注意less-loader插件必须以less为依赖
//less需要单独安装,不会随着less-loader一起安装
npm install less --save-dev 

2)配置webpack.config.js的module模块

      {
          test: /\.css$/,
          //下面两行,作用相同,选择自己比较喜欢的样式即可
          // use: [ 'style-loader', 'css-loader' ]
          loader: 'style-loader!css-loader'
      },
      {
          test: /\.less$/,
          //下面两行,作用相同,选择自己比较喜欢的样式即可
          // loader: 'style-loader!css-loader!less-loader'
          use: [
              'style-loader',
              { loader: 'css-loader', options: { importLoaders: 1 } },
              'less-loader'
          ]
      },

3)引入.css/.less文件
在标签的头部,引入.css文件,格式如下

//引入.css文件
import css from '文件目录.css'
//引入.less文件
import css from '文件目录.less'

4)配置package.json
该文件中包含生产环境配置、开发环境配置、测试环境配置,
开发环境配置(devDependencies):如下,加入自己引用的loader和版本号

//下面是我的开发环境配置
 "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "cross-env": "^5.0.5",
    "css-loader": "^0.28.7",   //引入css加载器
    "style-loader": "^0.19.0", //引入style加载器
    "less-loader": "^4.0.5",   //引入less加载器
    "less": "^2.7.3",          //引入less
    "file-loader": "^1.1.4",
    "vue-loader": "^13.0.5",
    "vue-template-compiler": "^2.4.4",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  }

5)重新运行

    npm i   
    npm run dev

6)注意
webpack2中,不再推荐缩写形式 style!css,应该要加上-loader,如

 style-loader!css-loader

以上操作中,可能会有重复的地方,但是,这么一系列操作下来,可以确保.less文件和.css文件,可以正确编译。

官方文档:http://www.css88.com/doc/webpack2/loaders/css-loader/

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值