Question

我已经配置了几个小时，问题一直存在。我已经在Internet上搜索了，找不到解决方法。这是我遇到的三种错误类型

  ./src/styles/app.scss中的
ERROR找不到模块：错误：无法解决   的“ fonts / american-typewriter.woff2”   '/ Users / liumy / Documents / xxx / www / src / styles'@ ./src/styles/app.scss   7：371-413 @ ./src/index.js @多   （webpack）-dev-server / client？http://localhost:3000 ./src/index.js
     .p / src / PageHome / style.scss中的
ERROR找不到模块：错误：找不到   在以下位置解析“ assets / background.jpg”   '/ Users / liumy / Documents / xxx / www / src / PageHome'@   ./src/PageHome/style.scss 7：220-252 @ ./src/PageHome/index.js @   ./src/index.js @多   （webpack）-dev-server / client？http://localhost:3000 ./src/index.js
     ./src/components/NavBar/style.scss中的
ERROR模块构建失败（来自   ./node_modules/sass-loader/lib/loader.js）：var colors =   require（'./ colors'）;         “ v”后的CSS无效：预期为1个选择器或规则，为“ var colors = requir”         在/Users/liumy/Documents/xxx/www/node_modules/colors/lib/index.js中（第   1，第1列）@ ./src/components/NavBar/index.js 17：13-36 @   ./src/index.js @多   （webpack）-dev-server / client？http://localhost:3000 ./src/index.js

这是我的webpack配置：

  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: ["node_modules"],
        use: [{ loader: "babel-loader" }]
      },
      {
        test: [
          /\.(png|jpg|gif|woff|woff2|eot|ttf|svg)/,
          /\/typefaces\/.*\.svg/
        ],
        use: [{ loader: "file-loader" }]
      },
      {
        test: /\.s?css$/,
        use: [
          {
            loader: "css-loader",
            options: {
              modules: true,
              camelCase: true,
              localIdentName: "[name]__[local]__[hash:base64:5]",
              minimize: true,
              sourceMap: true,
              importLoaders: 1
            }
          },
          {
            loader: "postcss-loader"
          },
          {
            loader: "resolve-url-loader"
          },
          {
            loader: "sass-loader",
            options: {
              sourceMap: true,
              includePaths: [path.resolve(SRC_PATH, "styles")]
            }
          }
        ]
      }
    ]
  },

可能是什么问题？谢谢！

Answer 1

您是否尝试过将路径添加到sass-loader的{{1}}找不到的资源中？

includePaths

includePaths: [path.resolve(SRC_PATH, "styles"), path.resolve(SRC_PATH, "path/to/assets")]是path/to/assets/的一部分

或者尝试将path/to/assets/fonts/american-typewriter.woff2添加到includePaths，因为您从css-loader中得到了错误

Answer 2

我通过yarn add安装了一些库后出现了问题，即使我没有使用它们，但似乎它们在node_modules中的存在使sass-loader混乱了。我不确定这是否是真正的问题，但是在删除了那些库之后，Webpack便可以编译了。我希望我的经验可以为遇到相同问题的任何人提供一些见识-考虑删除一些您不使用的库。

在Webpack中使用sass-loader发生多个错误

2 个答案: