Webpack 在加载 CSS 时抛出错误“Unexpected token”答案

【问题标题】：Webpack throws error "Unexpected token" when loading CSSWebpack 在加载 CSS 时抛出错误“Unexpected token”
【发布时间】：2016-07-10 11:01:25
【问题描述】：

我尝试将预建的semantic.css 导入入口文件index.js，webpack 报告：

../semantic/dist/semantic.css 中的错误模块解析失败：/home/khoa/projects/mystack/test/semantic/dist/semantic.css 意外字符“@”（11:0）您可能需要适当的加载程序来处理此文件类型。 SyntaxError：意外字符“@”（11:0）

所以我猜我错过了一些加载 css @import url 语句的加载程序。我用谷歌搜索了很多小时，尝试了各种加载器，但没有成功。之后，我注意到无论我在 css 文件的 loader-field 中放入什么，结果都是一样的。（甚至一些带有任何扩展名的东西都可以在原始加载器上正常工作。）

{
  test: /\.css$/,
  include: path.resolve(__dirname, '../semantic/dist'),
  loader: 'style!css!postcss' // whatever I put here doesn't matter
},

我尝试重新启动计算机并重新安装所有模块，但没有任何改变。所以我猜是webpack的问题。

【问题讨论】：

你检查你添加的css文件的内容了吗？它在第 11 行清楚地说明了字符“@”，因此，它可能是 webpack 不喜欢的 css 文件中的导入或注释。
谢谢大家，我刚刚意识到我解决了错误的包含路径，我认为 __dirname 是exports.context 目录。

标签： webpack

【解决方案1】：

如果您在 Windows 上，则必须设法使路径正常工作。

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

我建议您检查 ExtractTextPlugin(https://github.com/webpack/extract-text-webpack-plugin)。

将路径添加到您的加载器：

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 文件，而不是将其作为样式标签放入。