vue 引入css总是报错Module build failed: Syntax Error

Question

vue import css 文件时 webpack 总是报错

//In package.json:
devDependencies:{
    "less": "^3.8.1",
    "less-loader": "^4.1.0",
    "vue-style-loader": "^3.1.2",
    "style-loader": "^0.23.1",
    "css-loader": "^0.28.11",
    ...
}
//webpack.base.conf.js 文件配置
      {
        test:/\.css$/,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader'
        ]
      },
//main.js 引入
import 'photoswipe/dist/photoswipe.css'

然后webpack 就会报错,如下:

Module build failed: Syntax Error 

(5:1) Unknown word

  3 | // load the styles
  4 | var content = require("!!../../css-loader/index.js??ref--7-1!../../postcss-loader/lib/index.js??ref--7-2!./photoswipe.css");
> 5 | if(typeof content === 'string') content = [[module.id, content, '']];
    | ^
  6 | if(content.locals) module.exports = content.locals;
  7 | // add the styles to the DOM

查到的解决方法都解决不了:
1.调换webpack 配置文件的顺序(无效),将style-loader放到第一位:

{
        test:/\.css$/,
        use: [
          'style-loader',//这个本来就在第一位
          'css-loader',
          'postcss-loader'
        ]
      },

2.重装style-loader(无效)
3.仅留下css-loader(无效)

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

github上面的bug演示地址
github上面关于此问题的讨论
github上面关于此问题的讨论2

Answer 1

后来多次查询后,将webpack.base.conf.js 注释掉即可,VUE-loader 已经包含对css的编译,注释掉也不会影响系统.

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

/*        use: [
          'style-loader',
          'css-loader',
          'postcss-loader'
        ]*/
     },

Answer 2

After setting up your postcss.config.js, add postcss-loader to your webpack.config.js. You can use it standalone or in conjunction with css-loader (recommended). Use it after css-loader and style-loader, but before other preprocessor loaders like e.g sass|less|stylus-loader, if you use any.

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'postcss-loader' ]
      }
    ]
  }
}

⚠️ When postcss-loader is used standalone (without css-loader) don't use @import in your CSS, since this can lead to quite bloated bundles

webpack.config.js (recommended)

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          { loader: 'css-loader', options: { importLoaders: 1 } },
          'postcss-loader'
        ]
      }
    ]
  }
}