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

7,145 阅读1分钟

问题:在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'],
        }
    },
}