CSS模块，SASS + Webpack3 + React

时间：2018-01-15 18:45:13

标签： sass webpack-3 react-css-modules

我正在努力设置我的webpack配置......我尝试了许多没有结果的东西。当我尝试编译bundle时，我收到了关于.svg文件路径的大量错误，但是路径没问题。 

> ERROR in ./client/components/home-page/SocialMediaAuthentication.scss
Module build failed: ModuleNotFoundError: Module not found: Error: Can't resolve './assets/icons/facebook.svg' in '/Users/elegancko/Projects/YesChef/client/components/home-page'
    at factoryCallback (/Users/elegancko/Projects/YesChef/node_modules/webpack/lib/Compilation.js:276:40)
    at factory (/Users/elegancko/Projects/YesChef/node_modules/webpack/lib/NormalModuleFactory.js:235:20)
    at resolver (/Users/elegancko/Projects/YesChef/node_modules/webpack/lib/NormalModuleFactory.js:60:20)
    at asyncLib.parallel (/Users/elegancko/Projects/YesChef/node_modules/webpack/lib/NormalModuleFactory.js:127:20)
    at /Users/elegancko/Projects/YesChef/node_modules/async/dist/async.js:3694:9
    at /Users/elegancko/Projects/YesChef/node_modules/async/dist/async.js:356:16
    at iteratorCallback (/Users/elegancko/Projects/YesChef/node_modules/async/dist/async.js:934:13)
    at /Users/elegancko/Projects/YesChef/node_modules/async/dist/async.js:840:16
    at /Users/elegancko/Projects/YesChef/node_modules/async/dist/async.js:3691:13
    at apply (/Users/elegancko/Projects/YesChef/node_modules/async/dist/async.js:21:25)
    at /Users/elegancko/Projects/YesChef/node_modules/async/dist/async.js:56:12
    at resolvers.normal.resolve (/Users/elegancko/Projects/YesChef/node_modules/webpack/lib/NormalModuleFactory.js:119:22)
    at onError (/Users/elegancko/Projects/YesChef/node_modules/enhanced-resolve/lib/Resolver.js:65:10)
    at loggingCallbackWrapper (/Users/elegancko/Projects/YesChef/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at runAfter (/Users/elegancko/Projects/YesChef/node_modules/enhanced-resolve/lib/Resolver.js:158:4)
    at innerCallback (/Users/elegancko/Projects/YesChef/node_modules/enhanced-resolve/lib/Resolver.js:146:3)
    at loggingCallbackWrapper (/Users/elegancko/Projects/YesChef/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at next (/Users/elegancko/Projects/YesChef/node_modules/tapable/lib/Tapable.js:252:11)
    at /Users/elegancko/Projects/YesChef/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:40:4
    at loggingCallbackWrapper (/Users/elegancko/Projects/YesChef/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at runAfter (/Users/elegancko/Projects/YesChef/node_modules/enhanced-resolve/lib/Resolver.js:158:4)
    at innerCallback (/Users/elegancko/Projects/YesChef/node_modules/enhanced-resolve/lib/Resolver.js:146:3)
    at loggingCallbackWrapper (/Users/elegancko/Projects/YesChef/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at next (/Users/elegancko/Projects/YesChef/node_modules/tapable/lib/Tapable.js:252:11)
    at innerCallback (/Users/elegancko/Projects/YesChef/node_modules/enhanced-resolve/lib/Resolver.js:144:11)
    at loggingCallbackWrapper (/Users/elegancko/Projects/YesChef/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at next (/Users/elegancko/Projects/YesChef/node_modules/tapable/lib/Tapable.js:249:35)
    at resolver.doResolve.createInnerCallback (/Users/elegancko/Projects/YesChef/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:44:6)
    at loggingCallbackWrapper (/Users/elegancko/Projects/YesChef/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at afterInnerCallback (/Users/elegancko/Projects/YesChef/node_modules/enhanced-resolve/lib/Resolver.js:168:10)
 @ ./client/components/home-page/SocialMediaAuthentication.js 11:0-43
 @ ./client/components/home-page/ForgotPasswordForm.js
 @ ./client/App.js
 @ ./client/index.js

有谁知道如何修复它？请在下面找到我的webpack配置代码

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractWebpackPlugin = require('extract-text-webpack-plugin')

const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
  template: path.join(__dirname, '/client/index.html'),
  filename: 'index.html',
  inject: true
})

const ExtractWebpackPluginConfig = new ExtractWebpackPlugin({
  filename: 'index.css',
  allChunks: true
})
module.exports = {
  entry: './client/index.js',
  output: {
    path: path.join(__dirname, '/build'),
    publicPath: '/',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: './client',
    hot: true,
    historyApiFallback: true,
    port: 3000
  },
  module: {
    loaders: [
      {
        enforce: 'pre',
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'standard-loader',
      },
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loaders: ['react-hot-loader/webpack', 'babel-loader']
      },
      {
        test: /\.scss$/,
        loader: ExtractWebpackPlugin.extract(['css-loader', 'sass-loader']),
      },
      {
        test: /\.css$/,
        exclude: [/\.global\./, /node_modules/],
        loader: ExtractWebpackPlugin.extract(
          {
            fallback: 'style-loader',
            use: [
              {
                loader: 'css-loader',
                options: {
                  importLoaders: 1,
                  modules: true,
                  autoprefixer: true,
                  minimize: true,
                  localIdentName: '[name]__[local]___[hash:base64:5]'
                }
              }
            ]
          })
      },
      {
        test: /\.css/,
        include: [/\.global\./, /node_modules/],
        loader: ExtractWebpackPlugin.extract(
          {
            fallback: 'style-loader',
            use: ['css-loader']
          })
      },
      {
        test: /\.(woff|woff2|ttf|eot|glyph|\.svg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10000,
              name: 'font/[name].[ext]',
            },
          },
        ],
      },
      {
        test: /\.(jpg|jpeg|gif|png|tiff|svg)$/,
        exclude: /\.glyph.svg/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 6000,
              name: 'image/[name].[ext]',
            },
          },
        ],
      },
      {
        test: /\.(mp3|aac|aiff|wav|flac|m4a|mp4|ogg)$/,
        exclude: /\.glyph.svg/,
        use: [
          {
            loader: 'file-loader',
            options: { name: 'audio/[name].[ext]' },
          },
        ],
      },
    ]
  },
  plugins: [
    HtmlWebpackPluginConfig,
    ExtractWebpackPluginConfig
  ]
}

我正在看很多教程如何正确设置webpack以使用SASS + CSS模块+ Webpack（我没有使用Create React App包）

enter image description here 它喜欢在不同的路径中寻找svg

路径enter image description here

1 个答案:

答案 0 :(得分：1)

问题在于svg文件的路径。

相关问题
最新问题