Why is Webpack file-loader not triggering for CSS urls?









up vote
0
down vote

favorite
1












I'm trying to get Webpack to suck up our image files that are referenced from .scss files. However, nothing I've tried seems to actually be triggering the file-loader. Our CSS is bundled up nicely, but any url() references in the CSS seem to be totally untouched, and no image files are emitted.



See below for example sass, and the current webpack config. I can verify that the file extension regex is correct, and changing the order of loaders doesn't seem to have any effect. Are there other steps needed to make sure the file-loader sees the urls in CSS?






 #hero 
background-image: url('/assets/welcome/responsive/header-image.jpg');
background-size: cover;
background-position: 0% 70%;
min-height: 435px;
background-color: #000;
color: $white;
font-weight: 200;
position: relative;








const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports =
mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
entry:
'public/compiled/app': './app/assets/javascripts/compile/application.js',
'public/compiled/seo_srp_map_sections':
'./app/assets/javascripts/compile/seo_srp_map_sections.js',
'app/assets/javascripts/server_rendering':
'./app/assets/javascripts/server_rendering_to_compile.js'
,
output:
filename: '[name].js',
path: path.resolve(__dirname, '.')
,
resolve:
alias:
templates: path.resolve(__dirname, 'app/assets/javascripts/templates'),
stylesheets: path.resolve(__dirname, 'app/assets/stylesheets'),
vendor_stylesheets: path.resolve(__dirname, 'vendor/assets/stylesheets')

,
plugins: [
new webpack.ProvidePlugin(
jQuery: 'jquery'
),
new MiniCssExtractPlugin(
filename: '[name].css'
)
],
module:
rules: [

test: /.ejs$/,
loader: 'ejs-loader'
,

test: /.m?jsx?$/,
use:
loader: 'babel-loader'

,

test: /.s?css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
,
woff2
]

;












share|improve this question

























    up vote
    0
    down vote

    favorite
    1












    I'm trying to get Webpack to suck up our image files that are referenced from .scss files. However, nothing I've tried seems to actually be triggering the file-loader. Our CSS is bundled up nicely, but any url() references in the CSS seem to be totally untouched, and no image files are emitted.



    See below for example sass, and the current webpack config. I can verify that the file extension regex is correct, and changing the order of loaders doesn't seem to have any effect. Are there other steps needed to make sure the file-loader sees the urls in CSS?






     #hero 
    background-image: url('/assets/welcome/responsive/header-image.jpg');
    background-size: cover;
    background-position: 0% 70%;
    min-height: 435px;
    background-color: #000;
    color: $white;
    font-weight: 200;
    position: relative;








    const path = require('path');
    const webpack = require('webpack');
    const MiniCssExtractPlugin = require('mini-css-extract-plugin');

    module.exports =
    mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
    entry:
    'public/compiled/app': './app/assets/javascripts/compile/application.js',
    'public/compiled/seo_srp_map_sections':
    './app/assets/javascripts/compile/seo_srp_map_sections.js',
    'app/assets/javascripts/server_rendering':
    './app/assets/javascripts/server_rendering_to_compile.js'
    ,
    output:
    filename: '[name].js',
    path: path.resolve(__dirname, '.')
    ,
    resolve:
    alias:
    templates: path.resolve(__dirname, 'app/assets/javascripts/templates'),
    stylesheets: path.resolve(__dirname, 'app/assets/stylesheets'),
    vendor_stylesheets: path.resolve(__dirname, 'vendor/assets/stylesheets')

    ,
    plugins: [
    new webpack.ProvidePlugin(
    jQuery: 'jquery'
    ),
    new MiniCssExtractPlugin(
    filename: '[name].css'
    )
    ],
    module:
    rules: [

    test: /.ejs$/,
    loader: 'ejs-loader'
    ,

    test: /.m?jsx?$/,
    use:
    loader: 'babel-loader'

    ,

    test: /.s?css$/,
    use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
    ,
    woff2
    ]

    ;












    share|improve this question























      up vote
      0
      down vote

      favorite
      1









      up vote
      0
      down vote

      favorite
      1






      1





      I'm trying to get Webpack to suck up our image files that are referenced from .scss files. However, nothing I've tried seems to actually be triggering the file-loader. Our CSS is bundled up nicely, but any url() references in the CSS seem to be totally untouched, and no image files are emitted.



      See below for example sass, and the current webpack config. I can verify that the file extension regex is correct, and changing the order of loaders doesn't seem to have any effect. Are there other steps needed to make sure the file-loader sees the urls in CSS?






       #hero 
      background-image: url('/assets/welcome/responsive/header-image.jpg');
      background-size: cover;
      background-position: 0% 70%;
      min-height: 435px;
      background-color: #000;
      color: $white;
      font-weight: 200;
      position: relative;








      const path = require('path');
      const webpack = require('webpack');
      const MiniCssExtractPlugin = require('mini-css-extract-plugin');

      module.exports =
      mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
      entry:
      'public/compiled/app': './app/assets/javascripts/compile/application.js',
      'public/compiled/seo_srp_map_sections':
      './app/assets/javascripts/compile/seo_srp_map_sections.js',
      'app/assets/javascripts/server_rendering':
      './app/assets/javascripts/server_rendering_to_compile.js'
      ,
      output:
      filename: '[name].js',
      path: path.resolve(__dirname, '.')
      ,
      resolve:
      alias:
      templates: path.resolve(__dirname, 'app/assets/javascripts/templates'),
      stylesheets: path.resolve(__dirname, 'app/assets/stylesheets'),
      vendor_stylesheets: path.resolve(__dirname, 'vendor/assets/stylesheets')

      ,
      plugins: [
      new webpack.ProvidePlugin(
      jQuery: 'jquery'
      ),
      new MiniCssExtractPlugin(
      filename: '[name].css'
      )
      ],
      module:
      rules: [

      test: /.ejs$/,
      loader: 'ejs-loader'
      ,

      test: /.m?jsx?$/,
      use:
      loader: 'babel-loader'

      ,

      test: /.s?css$/,
      use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
      ,
      woff2
      ]

      ;












      share|improve this question













      I'm trying to get Webpack to suck up our image files that are referenced from .scss files. However, nothing I've tried seems to actually be triggering the file-loader. Our CSS is bundled up nicely, but any url() references in the CSS seem to be totally untouched, and no image files are emitted.



      See below for example sass, and the current webpack config. I can verify that the file extension regex is correct, and changing the order of loaders doesn't seem to have any effect. Are there other steps needed to make sure the file-loader sees the urls in CSS?






       #hero 
      background-image: url('/assets/welcome/responsive/header-image.jpg');
      background-size: cover;
      background-position: 0% 70%;
      min-height: 435px;
      background-color: #000;
      color: $white;
      font-weight: 200;
      position: relative;








      const path = require('path');
      const webpack = require('webpack');
      const MiniCssExtractPlugin = require('mini-css-extract-plugin');

      module.exports =
      mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
      entry:
      'public/compiled/app': './app/assets/javascripts/compile/application.js',
      'public/compiled/seo_srp_map_sections':
      './app/assets/javascripts/compile/seo_srp_map_sections.js',
      'app/assets/javascripts/server_rendering':
      './app/assets/javascripts/server_rendering_to_compile.js'
      ,
      output:
      filename: '[name].js',
      path: path.resolve(__dirname, '.')
      ,
      resolve:
      alias:
      templates: path.resolve(__dirname, 'app/assets/javascripts/templates'),
      stylesheets: path.resolve(__dirname, 'app/assets/stylesheets'),
      vendor_stylesheets: path.resolve(__dirname, 'vendor/assets/stylesheets')

      ,
      plugins: [
      new webpack.ProvidePlugin(
      jQuery: 'jquery'
      ),
      new MiniCssExtractPlugin(
      filename: '[name].css'
      )
      ],
      module:
      rules: [

      test: /.ejs$/,
      loader: 'ejs-loader'
      ,

      test: /.m?jsx?$/,
      use:
      loader: 'babel-loader'

      ,

      test: /.s?css$/,
      use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
      ,
      woff2
      ]

      ;








       #hero 
      background-image: url('/assets/welcome/responsive/header-image.jpg');
      background-size: cover;
      background-position: 0% 70%;
      min-height: 435px;
      background-color: #000;
      color: $white;
      font-weight: 200;
      position: relative;





       #hero 
      background-image: url('/assets/welcome/responsive/header-image.jpg');
      background-size: cover;
      background-position: 0% 70%;
      min-height: 435px;
      background-color: #000;
      color: $white;
      font-weight: 200;
      position: relative;





      const path = require('path');
      const webpack = require('webpack');
      const MiniCssExtractPlugin = require('mini-css-extract-plugin');

      module.exports =
      mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
      entry:
      'public/compiled/app': './app/assets/javascripts/compile/application.js',
      'public/compiled/seo_srp_map_sections':
      './app/assets/javascripts/compile/seo_srp_map_sections.js',
      'app/assets/javascripts/server_rendering':
      './app/assets/javascripts/server_rendering_to_compile.js'
      ,
      output:
      filename: '[name].js',
      path: path.resolve(__dirname, '.')
      ,
      resolve:
      alias:
      templates: path.resolve(__dirname, 'app/assets/javascripts/templates'),
      stylesheets: path.resolve(__dirname, 'app/assets/stylesheets'),
      vendor_stylesheets: path.resolve(__dirname, 'vendor/assets/stylesheets')

      ,
      plugins: [
      new webpack.ProvidePlugin(
      jQuery: 'jquery'
      ),
      new MiniCssExtractPlugin(
      filename: '[name].css'
      )
      ],
      module:
      rules: [

      test: /.ejs$/,
      loader: 'ejs-loader'
      ,

      test: /.m?jsx?$/,
      use:
      loader: 'babel-loader'

      ,

      test: /.s?css$/,
      use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
      ,
      woff2
      ]

      ;





      const path = require('path');
      const webpack = require('webpack');
      const MiniCssExtractPlugin = require('mini-css-extract-plugin');

      module.exports =
      mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
      entry:
      'public/compiled/app': './app/assets/javascripts/compile/application.js',
      'public/compiled/seo_srp_map_sections':
      './app/assets/javascripts/compile/seo_srp_map_sections.js',
      'app/assets/javascripts/server_rendering':
      './app/assets/javascripts/server_rendering_to_compile.js'
      ,
      output:
      filename: '[name].js',
      path: path.resolve(__dirname, '.')
      ,
      resolve:
      alias:
      templates: path.resolve(__dirname, 'app/assets/javascripts/templates'),
      stylesheets: path.resolve(__dirname, 'app/assets/stylesheets'),
      vendor_stylesheets: path.resolve(__dirname, 'vendor/assets/stylesheets')

      ,
      plugins: [
      new webpack.ProvidePlugin(
      jQuery: 'jquery'
      ),
      new MiniCssExtractPlugin(
      filename: '[name].css'
      )
      ],
      module:
      rules: [

      test: /.ejs$/,
      loader: 'ejs-loader'
      ,

      test: /.m?jsx?$/,
      use:
      loader: 'babel-loader'

      ,

      test: /.s?css$/,
      use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
      ,
      woff2
      ]

      ;






      javascript css webpack webpack-4 webpack-file-loader






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 10 at 2:59









      Asherlc

      2411524




      2411524






















          1 Answer
          1






          active

          oldest

          votes

















          up vote
          -1
          down vote













          You can add MiniCssExtractPlugin like this:



           plugins: [
          new MiniCssExtractPlugin(
          filename: "style.css",
          chunkFilename: "style.chunk.css",
          hot: true,
          orderWarning: true,
          reloadAll: true,
          cssModules: true
          )
          ]


          And for images type, you can try with url-loader



           gif)$/,
          use: [

          loader: 'url-loader',
          options:
          limit: 5000


          ]



          For svg, font format you can use loader is file-loader.






          share|improve this answer




















          • Why do you think this will work differently? As well, I want to keep using file-loader, is there any reason why you think this will work better?
            – Asherlc
            Nov 13 at 17:45










          • @Asherlc Have you tried?
            – Hai Tien
            Nov 14 at 0:21










          Your Answer






          StackExchange.ifUsing("editor", function ()
          StackExchange.using("externalEditor", function ()
          StackExchange.using("snippets", function ()
          StackExchange.snippets.init();
          );
          );
          , "code-snippets");

          StackExchange.ready(function()
          var channelOptions =
          tags: "".split(" "),
          id: "1"
          ;
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function()
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled)
          StackExchange.using("snippets", function()
          createEditor();
          );

          else
          createEditor();

          );

          function createEditor()
          StackExchange.prepareEditor(
          heartbeatType: 'answer',
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader:
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          ,
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          );



          );













          draft saved

          draft discarded


















          StackExchange.ready(
          function ()
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53235654%2fwhy-is-webpack-file-loader-not-triggering-for-css-urls%23new-answer', 'question_page');

          );

          Post as a guest















          Required, but never shown

























          1 Answer
          1






          active

          oldest

          votes








          1 Answer
          1






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes








          up vote
          -1
          down vote













          You can add MiniCssExtractPlugin like this:



           plugins: [
          new MiniCssExtractPlugin(
          filename: "style.css",
          chunkFilename: "style.chunk.css",
          hot: true,
          orderWarning: true,
          reloadAll: true,
          cssModules: true
          )
          ]


          And for images type, you can try with url-loader



           gif)$/,
          use: [

          loader: 'url-loader',
          options:
          limit: 5000


          ]



          For svg, font format you can use loader is file-loader.






          share|improve this answer




















          • Why do you think this will work differently? As well, I want to keep using file-loader, is there any reason why you think this will work better?
            – Asherlc
            Nov 13 at 17:45










          • @Asherlc Have you tried?
            – Hai Tien
            Nov 14 at 0:21














          up vote
          -1
          down vote













          You can add MiniCssExtractPlugin like this:



           plugins: [
          new MiniCssExtractPlugin(
          filename: "style.css",
          chunkFilename: "style.chunk.css",
          hot: true,
          orderWarning: true,
          reloadAll: true,
          cssModules: true
          )
          ]


          And for images type, you can try with url-loader



           gif)$/,
          use: [

          loader: 'url-loader',
          options:
          limit: 5000


          ]



          For svg, font format you can use loader is file-loader.






          share|improve this answer




















          • Why do you think this will work differently? As well, I want to keep using file-loader, is there any reason why you think this will work better?
            – Asherlc
            Nov 13 at 17:45










          • @Asherlc Have you tried?
            – Hai Tien
            Nov 14 at 0:21












          up vote
          -1
          down vote










          up vote
          -1
          down vote









          You can add MiniCssExtractPlugin like this:



           plugins: [
          new MiniCssExtractPlugin(
          filename: "style.css",
          chunkFilename: "style.chunk.css",
          hot: true,
          orderWarning: true,
          reloadAll: true,
          cssModules: true
          )
          ]


          And for images type, you can try with url-loader



           gif)$/,
          use: [

          loader: 'url-loader',
          options:
          limit: 5000


          ]



          For svg, font format you can use loader is file-loader.






          share|improve this answer












          You can add MiniCssExtractPlugin like this:



           plugins: [
          new MiniCssExtractPlugin(
          filename: "style.css",
          chunkFilename: "style.chunk.css",
          hot: true,
          orderWarning: true,
          reloadAll: true,
          cssModules: true
          )
          ]


          And for images type, you can try with url-loader



           gif)$/,
          use: [

          loader: 'url-loader',
          options:
          limit: 5000


          ]



          For svg, font format you can use loader is file-loader.







          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Nov 10 at 3:41









          Hai Tien

          77141330




          77141330











          • Why do you think this will work differently? As well, I want to keep using file-loader, is there any reason why you think this will work better?
            – Asherlc
            Nov 13 at 17:45










          • @Asherlc Have you tried?
            – Hai Tien
            Nov 14 at 0:21
















          • Why do you think this will work differently? As well, I want to keep using file-loader, is there any reason why you think this will work better?
            – Asherlc
            Nov 13 at 17:45










          • @Asherlc Have you tried?
            – Hai Tien
            Nov 14 at 0:21















          Why do you think this will work differently? As well, I want to keep using file-loader, is there any reason why you think this will work better?
          – Asherlc
          Nov 13 at 17:45




          Why do you think this will work differently? As well, I want to keep using file-loader, is there any reason why you think this will work better?
          – Asherlc
          Nov 13 at 17:45












          @Asherlc Have you tried?
          – Hai Tien
          Nov 14 at 0:21




          @Asherlc Have you tried?
          – Hai Tien
          Nov 14 at 0:21

















          draft saved

          draft discarded
















































          Thanks for contributing an answer to Stack Overflow!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid


          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.

          To learn more, see our tips on writing great answers.





          Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


          Please pay close attention to the following guidance:


          • Please be sure to answer the question. Provide details and share your research!

          But avoid


          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.

          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function ()
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53235654%2fwhy-is-webpack-file-loader-not-triggering-for-css-urls%23new-answer', 'question_page');

          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          Popular posts from this blog

          Darth Vader #20

          How to how show current date and time by default on contact form 7 in WordPress without taking input from user in datetimepicker

          Ondo