webpack中css使用行內註釋報錯Unknown word

midsummer發表於2018-06-22
WebCSS

問題：在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'],
        }
    },
}
複製程式碼

相關文章