webpack中css使用行内注释报错Unknown word

问题：在webpack项目中对*.css文件使用‘//’注释时会产生报错，而使用‘/**/’注释不会报错 例如：

/* test*/
// test
复制代码

其中第二行会产生报错

ERROR in ./src/css/index.css (./node_modules/css-loader!./node_modules/postcss-loader/lib!./src/css/index.css)
Module build failed (from ./node_modules/postcss-loader/lib/index.js):
Syntax Error 

(22:1) Unknown word

  20 | }
  21 | /* test*/
> 22 | // test
复制代码

原因是css文件中只支持 /* comments */ 方式的注释。若想支持‘//’方式，可以安装插件 postcss-scss

yarn add postcss-scss --dev
复制代码

然后在postcss.config.js中添加它为解析器

module.exports = {
    sourceMap: false,
    // parser: 'postcss-scss',
    plugins: {
        precss: {},
        'postcss-preset-env': {},
        'postcss-plugin-px2rem': {
            rootValue: 100,
            propBlackList: ['border', 'border-top', 'border-bottom', 'border-left', 'border-right'],
        }
    },
}
复制代码

转载于:https://juejin.im/post/5b2cc251f265da5976548453