在webpack + react中使用sass-loader发生多个错误

Question

I've been configuring for several hours and the problem keeps going. I've searched over the Internet and couldn't find solve it. Here are the three types of error I get

ERROR in ./src/styles/app.scss Module not found: Error: Can't resolve 'fonts/american-typewriter.woff2' in '/Users/liumy/Documents/xxx/www/src/styles' @ ./src/styles/app.scss 7:371-413 @ ./src/index.js @ multi (webpack)-dev-server/client? http://localhost:3000 ./src/index.js

ERROR in ./src/PageHome/style.scss Module not found: Error: Can't resolve 'assets/background.jpg' in '/Users/liumy/Documents/xxx/www/src/PageHome' @ ./src/PageHome/style.scss 7:220-252 @ ./src/PageHome/index.js @ ./src/index.js @ multi (webpack)-dev-server/client? http://localhost:3000 ./src/index.js

ERROR in ./src/components/NavBar/style.scss Module build failed (from ./node_modules/sass-loader/lib/loader.js): var colors = require('./colors'); Invalid CSS after "v": expected 1 selector or at-rule, was "var colors = requir" in /Users/liumy/Documents/xxx/www/node_modules/colors/lib/index.js (line 1, column 1) @ ./src/components/NavBar/index.js 17:13-36 @ ./src/index.js @ multi (webpack)-dev-server/client? http://localhost:3000 ./src/index.js

And here is my webpack config:

  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")]
            }
          }
        ]
      }
    ]
  },

What could the problem possibly be? Thanks!

Answer 1

Have you tried to add the path to the resources that are not found to sass-loader 's includePaths ?

includePaths: [path.resolve(SRC_PATH, "styles"), path.resolve(SRC_PATH, "path/to/assets")]

Where path/to/assets/ is part of path/to/assets/fonts/american-typewriter.woff2

---

Or try adding includePaths to css-loader since you get the error from the webpack-dev-server

Answer 2

The problem arose after I installed some libraries through yarn add , even though I was not using them but it seems their existence in node_modules messed up with sass-loader. I'm not really sure if that's really the problem, but after removing those libraries the Webpack is able to compile. I hope my experience can provide some insight to anyone who's facing the same problem - consider removing some libraries that you're not using.