webpack使用css-loader提示Module build failed: Unknown word (5:1)

最新推荐文章于 2022-01-12 17:46:10 发布

weixin_30498807

最新推荐文章于 2022-01-12 17:46:10 发布

阅读量358

点赞数

文章标签： webpack javascript ViewUI

原文链接：http://www.cnblogs.com/tgxh/p/6729271.html

版权

webpack在使用css-loader时报错，错误如下

百度、谷歌、github、stackoverflow上都搜索未果，只找到删除css-loader的方案

{
        test: /\.css$/,
        loader: 'css-loader!style-loader'
}

后来发现问题在于loader配置项中，css-loader和style-loader顺序写反了，必须写成style-loader!css-loader

配置改成如下就好了

{
        test: /\.css$/,
        loader: 'style-loader!css-loader'
}

关于style-loader和css-loader

css-loader 是处理css文件中的url()等
style-loader 将css插入到页面的style标签顺便告诉你
less-loader 是将less文件编译成css
sass-loader 是将sass文件编译成css

loader的加载顺序是从右往左，从下往上

我的webpack配置文件

const path = require('path')
const webpack = require('webpack')
const autoprefixer = require('autoprefixer')
const ROOT_PATH = path.resolve(__dirname)
const APP_PATH = path.resolve(ROOT_PATH, 'src/js/main.js')
const BUILD_PATH = path.resolve(ROOT_PATH, 'dist')

module.exports = {
  entry: APP_PATH,
  output: {
    path: BUILD_PATH,
    filename: "bundle.js"
  },
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader!less-loader?!postcss-loader'
      },
      {
        test: /\.js$/,
        exclude: /node_module/,
        loader: 'babel-loader'
      }
    ]
  },
  plugins: [
    new webpack.LoaderOptionsPlugin({
      options: {
        postcss() {
          return [autoprefixer]
        }
      }
    })
  ]
}