Cannot gett his loader working

[saltnpixels]

{
            test: /\.s[ac]ss$/i, use: [
               {
                  loader: MiniCssExtractPlugin.loader,
               }, 'css-loader',
               {
                  loader: 'postcss-loader', options: {
                     ident: 'postcss',
                     plugins: () => [
                        postcssPresetEnv(/* pluginOptions */),
                     ]
                  }
               },
               { loader: 'resolve-url-loader' },
               {
                  loader: 'sass-loader',
                  options: {
                     implementation: require('sass')
                  }
               },
               'import-glob-loader'
            ]
         }

I cant get this working. I get an error: ERROR in ./src/images/maps.png 1:0 Module parse failed: Unexpected character '�' (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

one of my files has: background-image: url("../../images/maps.png");

Am I doing something wrong??

[saltnpixels]

hmmm seems you need file loader when using minicssextractplugin... at least it seems so because then i got it working...

[wendt88]

how you get it work? can you please share me your scss config?

[saltnpixels]

Sure: The trick was to have file loader

module.exports = {
   entry: {
      frontEnd: './src/index.js',
      backEnd: './src/admin-index.js',
      //add separate js files here if you dont want them concatenated into the others
   },
   devtool: 'source-map',
   output: {
      path: path.resolve(__dirname, 'dist'),
      filename: '[name]_bundle.js',
   },
   module: {
      //runs these and transforms on the code
      rules: [
         {
            test: /\.(png|jpe?g|gif)$/i,
            use: [
               {
                  loader: 'file-loader',
                  options: {
                     name: '[name].[ext]',
                     outputPath: 'images',
                  }
               },
            ],
         },
         { test: /\.svg$/, use: 'svg-inline-loader' },
         { test: /\.(js)$/, use: ['babel-loader', 'import-glob-loader'] }, //turns jsx into js the browser can understand and also allows for es6 to be used
         { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'] },
         {
            test: /\.s[ac]ss$/i, use: [
               {
                  loader: MiniCssExtractPlugin.loader,
               }, 'css-loader',
               {
                  loader: 'postcss-loader', options: {
                     ident: 'postcss',
                     plugins: () => [
                        postcssPresetEnv(/* pluginOptions */),
                     ]
                  }
               },
               { loader: 'resolve-url-loader' },
               {
                  loader: 'sass-loader',
                  options: {
                     implementation: require('sass')
                  }
               },
               'import-glob-loader'
            ]
         },
      ]
   },
   plugins: [
      new MiniCssExtractPlugin(),
      new BrowserSyncPlugin({
             host: themeConfig.local,
             proxy: themeConfig.local,
             https: true,

             files: [
                '**/*.php'
             ],
             reloadDelay: 0
          }
      ),
   ]
}

[wendt88]

thx! my problem was the combination of MiniCssExtractPlugin and style-loader (from bootstrap)

[bholloway]

Closing as solved