Webpack $: style-loader is not creating a style tag in my head












0















Style-loader doesn't seem to be generating a style tag in the head tag of my page. My code compiles successful only with a warming that states



WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production'
for this value. Set 'mode' option to 'development' or 'production' to enable
defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more:
https://webpack.js.org/concepts/mode/
i 「wdm」: Compiled with warnings.


This i owe to the fact that i am running my code locally using the 'webpack-dev-server' script in my package.json file that runs my project on a localhost



i 「wds」: Project is running at http://localhost:8080/


This is my webpack.config.js file



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

module.exports = {
entry: './src/js/app.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /.css$/,
use: ['style-loader', 'css-loader']
}
]
}


}


Below is the code in my app.js file(my entry point)



import './dom-loader';
import '../css/main.css';
import '../css/input-elements.css';
import _ from 'lodash';

var showSecret = false;

secretButton.addEventListener('click', toggleSecretState);
updateSecretParagraph();

function toggleSecretState() {
showSecret = !showSecret;
updateSecretParagraph();
updateSecretButton()
}

function updateSecretButton() {
if (showSecret) {
secretButton.textContent = 'Hide the Secret';
} else {
secretButton.textContent = 'Show the Secret';
}
}

function updateSecretParagraph() {
if (showSecret) {
secretParagraph.style.display = 'block';
} else {
secretParagraph.style.display = 'none';
}
}

element.classList.add('body');
element.classList.add('h1');


My imported javascipt files seem to work just fine, but for some reason the .css files do not generate the required style tag in the head of my page.










share|improve this question



























    0















    Style-loader doesn't seem to be generating a style tag in the head tag of my page. My code compiles successful only with a warming that states



    WARNING in configuration
    The 'mode' option has not been set, webpack will fallback to 'production'
    for this value. Set 'mode' option to 'development' or 'production' to enable
    defaults for each environment.
    You can also set it to 'none' to disable any default behavior. Learn more:
    https://webpack.js.org/concepts/mode/
    i 「wdm」: Compiled with warnings.


    This i owe to the fact that i am running my code locally using the 'webpack-dev-server' script in my package.json file that runs my project on a localhost



    i 「wds」: Project is running at http://localhost:8080/


    This is my webpack.config.js file



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

    module.exports = {
    entry: './src/js/app.js',
    output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
    },
    module: {
    rules: [
    {
    test: /.css$/,
    use: ['style-loader', 'css-loader']
    }
    ]
    }


    }


    Below is the code in my app.js file(my entry point)



    import './dom-loader';
    import '../css/main.css';
    import '../css/input-elements.css';
    import _ from 'lodash';

    var showSecret = false;

    secretButton.addEventListener('click', toggleSecretState);
    updateSecretParagraph();

    function toggleSecretState() {
    showSecret = !showSecret;
    updateSecretParagraph();
    updateSecretButton()
    }

    function updateSecretButton() {
    if (showSecret) {
    secretButton.textContent = 'Hide the Secret';
    } else {
    secretButton.textContent = 'Show the Secret';
    }
    }

    function updateSecretParagraph() {
    if (showSecret) {
    secretParagraph.style.display = 'block';
    } else {
    secretParagraph.style.display = 'none';
    }
    }

    element.classList.add('body');
    element.classList.add('h1');


    My imported javascipt files seem to work just fine, but for some reason the .css files do not generate the required style tag in the head of my page.










    share|improve this question

























      0












      0








      0








      Style-loader doesn't seem to be generating a style tag in the head tag of my page. My code compiles successful only with a warming that states



      WARNING in configuration
      The 'mode' option has not been set, webpack will fallback to 'production'
      for this value. Set 'mode' option to 'development' or 'production' to enable
      defaults for each environment.
      You can also set it to 'none' to disable any default behavior. Learn more:
      https://webpack.js.org/concepts/mode/
      i 「wdm」: Compiled with warnings.


      This i owe to the fact that i am running my code locally using the 'webpack-dev-server' script in my package.json file that runs my project on a localhost



      i 「wds」: Project is running at http://localhost:8080/


      This is my webpack.config.js file



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

      module.exports = {
      entry: './src/js/app.js',
      output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'bundle.js'
      },
      module: {
      rules: [
      {
      test: /.css$/,
      use: ['style-loader', 'css-loader']
      }
      ]
      }


      }


      Below is the code in my app.js file(my entry point)



      import './dom-loader';
      import '../css/main.css';
      import '../css/input-elements.css';
      import _ from 'lodash';

      var showSecret = false;

      secretButton.addEventListener('click', toggleSecretState);
      updateSecretParagraph();

      function toggleSecretState() {
      showSecret = !showSecret;
      updateSecretParagraph();
      updateSecretButton()
      }

      function updateSecretButton() {
      if (showSecret) {
      secretButton.textContent = 'Hide the Secret';
      } else {
      secretButton.textContent = 'Show the Secret';
      }
      }

      function updateSecretParagraph() {
      if (showSecret) {
      secretParagraph.style.display = 'block';
      } else {
      secretParagraph.style.display = 'none';
      }
      }

      element.classList.add('body');
      element.classList.add('h1');


      My imported javascipt files seem to work just fine, but for some reason the .css files do not generate the required style tag in the head of my page.










      share|improve this question














      Style-loader doesn't seem to be generating a style tag in the head tag of my page. My code compiles successful only with a warming that states



      WARNING in configuration
      The 'mode' option has not been set, webpack will fallback to 'production'
      for this value. Set 'mode' option to 'development' or 'production' to enable
      defaults for each environment.
      You can also set it to 'none' to disable any default behavior. Learn more:
      https://webpack.js.org/concepts/mode/
      i 「wdm」: Compiled with warnings.


      This i owe to the fact that i am running my code locally using the 'webpack-dev-server' script in my package.json file that runs my project on a localhost



      i 「wds」: Project is running at http://localhost:8080/


      This is my webpack.config.js file



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

      module.exports = {
      entry: './src/js/app.js',
      output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'bundle.js'
      },
      module: {
      rules: [
      {
      test: /.css$/,
      use: ['style-loader', 'css-loader']
      }
      ]
      }


      }


      Below is the code in my app.js file(my entry point)



      import './dom-loader';
      import '../css/main.css';
      import '../css/input-elements.css';
      import _ from 'lodash';

      var showSecret = false;

      secretButton.addEventListener('click', toggleSecretState);
      updateSecretParagraph();

      function toggleSecretState() {
      showSecret = !showSecret;
      updateSecretParagraph();
      updateSecretButton()
      }

      function updateSecretButton() {
      if (showSecret) {
      secretButton.textContent = 'Hide the Secret';
      } else {
      secretButton.textContent = 'Show the Secret';
      }
      }

      function updateSecretParagraph() {
      if (showSecret) {
      secretParagraph.style.display = 'block';
      } else {
      secretParagraph.style.display = 'none';
      }
      }

      element.classList.add('body');
      element.classList.add('h1');


      My imported javascipt files seem to work just fine, but for some reason the .css files do not generate the required style tag in the head of my page.







      webpack-4 webpack-style-loader






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 28 '18 at 15:26









      Osmek MeghaiOsmek Meghai

      12




      12
























          0






          active

          oldest

          votes











          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',
          autoActivateHeartbeat: false,
          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%2f53522846%2fwebpack-style-loader-is-not-creating-a-style-tag-in-my-head%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown

























          0






          active

          oldest

          votes








          0






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes
















          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.




          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53522846%2fwebpack-style-loader-is-not-creating-a-style-tag-in-my-head%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

          A CLEAN and SIMPLE way to add appendices to Table of Contents and bookmarks

          Calculate evaluation metrics using cross_val_predict sklearn

          Insert data from modal to MySQL (multiple modal on website)