import css from node js module

Question

I am using webpack, I can "import" the css file without error, but the css is not exported in the final product.

Webpack excerpt:

 module: {
    loaders: [
      {test: /\.css$/,loader: 'css-loader'},
      {test: /\.scss$/,loader: ExtractTextPlugin.extract('css-loader!sass-loader')},
      {test: /\.js$/, loader: 'babel-loader', include},
      {test: /\.json$/, loader: 'json', include},
      {test: /\.jpe?g$|\.gif$|\.png$/i, loader: "file-loader" },
    ]
  },

Run:

npm install hopscotch

Code:

import 'hopscotch/dist/css/hopscotch.css';

msj121 · Accepted Answer · 2017-04-04 05:19:27Z

1

I was not using extract for the css files...

{test: /\.css$/,loader: 'css-loader'},

Should be:

{test: /\.css$/,loader: ExtractTextPlugin.extract('css-loader')},

answered Apr 4, 2017 at 5:19

msj121

2,8404 gold badges30 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tom Van Rompaey · Accepted Answer · 2017-04-04 05:29:14Z

0

In addition to your answer, you also need to add ExtractTextPlugin to the plugins array to define where to export the extracted CSS.

module: {
  loaders: [
    {test: /\.css$/,loader: ExtractTextPlugin.extract('css-loader')},
    {test: /\.scss$/,loader: ExtractTextPlugin.extract('css-loader!sass-loader')},
    {test: /\.js$/, loader: 'babel-loader', include},
    {test: /\.json$/, loader: 'json', include},
    {test: /\.jpe?g$|\.gif$|\.png$/i, loader: "file-loader" },
  ]
  plugins: [
    new ExtractTextPlugin({ filename: 'style.css' }),
  ],
},

answered Apr 4, 2017 at 5:29

Tom Van Rompaey

3,58622 silver badges22 bronze badges

Collectives™ on Stack Overflow

import css from node js module

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related