webpack中 注释报错Unknown word

Question

https://blog.csdn.net/shidaping/article/details/78124015

文章说：postcss-loader不支持行内注释，写行内注注注释会报unknown word错误。解决办法加上postcss-strip-inline-comments这个parser。

npm install postcss-strip-inline-comments 《《《

---

实际上我试了， 并不需要是loader的执行顺序换一下就好

我之前是css-loader,less-loader,postcss-loader
一旦样式里有//的注释就报错

改成 css-loader,postcss-loader,less-loader 就好了

Answer 1

你这里有2问题你没搞清楚：

第一个问题：语法的问题

1. css的语法中是不支持 行内注释的，例如下面的代码：

/* 下面是语法错误 */
.demo{
  // font-size:10px;
}
/* 下面是语法是正确的 */
.demo{
  /* font-size:10px; */
}

2.postcss-loader 他只能对css代码进行预处理，当然他支持各种插件对功能，但是他也是没有支持 行内注释 //

1. 一些css预编译库是支持行内注释对，例如 less,sass或者scss;

第二个问题：webpack loader执行顺序

webpack 的loader执行是 从下到上，或者从右到左 （安装配置文件的顺序）

所以你的第一个写法的执行顺序是：
postcss-loader-->less-loader-->css-loader;

其实你这个执行顺序，不仅仅是行内注释有问题，应该很多 less语法都会出问题；因为你是这样的

demo.less-->postcss-loader; 你用 postcss-loader 去处理一个 less语法的文件；本身postcss-loader就是不是为 less设计的，所以就是本质上从错误

然后你的第二个写法就对了：
demo.less-->less-loader-->(demo.css)-->postcss-loader-->css.loader

因为 less-loader 已经把 你的 less文件 处理成了 标准的 css 文件，所以后续的解析就不会出错