CssSyntaxError 使用 Webpack 4 构建未知单词

Posted 2023-02-22

【中文标题】CssSyntaxError 使用 Webpack 4 构建未知单词

【英文标题】：CssSyntaxError Unknown word building with Webpack 4

【发布时间】：2019-11-26 20:02:20

【问题描述】：

Module build failed (from ./node_modules/css-loader/dist/cjs.js):
    CssSyntaxError

    (1:4) Unknown word

    > 1 | // style-loader: Adds some css to the DOM by adding a <style> tag
        |    ^
      2 | 
      3 | // load the styles

     @ ./node_modules/vue-slider-component/theme/antd.css 4:14-338 14:3-18:5 15:22-346

在 Webpack 4 中构建我的应用时出现此错误。这是我的 CSS 加载器配置：

    test: /\.css$/,
    use: ["vue-style-loader", "css-loader", "postcss-loader"]
,

    test: /\.scss$/,
    use: ["vue-style-loader", "css-loader", "postcss-loader", "sass-loader"]

我怎样才能稍微放宽规则，以免在这类问题上失败？

谢谢

【参考方案1】：

你不能有多个 css-loaders。这是一个可能的解决方案：

      
        test: /\.(sa|sc|c)ss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader',
          'postcss-loader',
        ]