Webpack 网页包抛出错误“；意外标记“；加载CSS时

我试图将预构建的

semantic.css

导入条目文件

index.js

，网页报告：

ERROR in ../semantic/dist/semantic.css Module parse failed: /home/khoa/projects/mystack/test/semantic/dist/semantic.css Unexpected character '@' (11:0) You may need an appropriate loader to handle this file type. SyntaxError: Unexpected character '@' (11:0) 我试图重新启动计算机并重新安装所有模块，但没有任何改变。

---

所以我想问题出在webpack上。

如果你在Windows上，你必须做一个变通，才能使路径工作

const path = require("path");
const srcPath = path.join(__dirname, 'src');

我建议您检查ExtractTextPlugin（）

将路径添加到加载程序：

loaders: [
      {test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader")}
      }
    ]

此外，您还必须将路径添加到加载程序中，我更喜欢在常量中添加路径，但这也应该有效

   {
      test: /\.css$/,
      include: path.resolve(__dirname, '../semantic/dist'),
      loader: 'style!css!postcss&includePaths[]=' + path.resolve(__dirname, "./src")
    },

还添加了解决方案：

resolve: {
    extensions: ["", ".js", ".css"],
    modulesDirectories: ["src", "node_modules"],
    root: [__dirname + path.sep + 'scripts'],
  }

---

添加ExtractTextPlugin与此问题无关。这只会将生成的文件提取为新的css文件，而不是将其作为样式标记放入。您是否检查了添加的css文件的内容？它在第11行清楚地说明了字符“@”，因此，它可能是css文件中Web包不喜欢的导入或某些注释。谢谢大家，我刚刚意识到我解决了错误的包含路径，我认为\uu dirname是exports.context dir。

resolve: {
    extensions: ["", ".js", ".css"],
    modulesDirectories: ["src", "node_modules"],
    root: [__dirname + path.sep + 'scripts'],
  }