How to root path loading of CSS in webpack

Question

The following css loading does not work.
import style from 'common/style.css'

JavaScript can be read with root path.
import Score from 'components/score'

Could you give me some advice?

Source Tree

.
└── src
    ├── app.js
    ├── common
    │   └── style.css
    ├── components
    │   ├── box.js
    │   └── score.js
    └── index.ejs

score.js

import React from 'react'
import style from 'common/style.css' // <= It is not loaded here

class Score extends React.Component {
  render() {
    return <div styleName="style.score">25</div>
  }
}

export default Score

webpack.config.js

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

module.exports = {
  entry: {
    app: './src/app.js'
  },
  output: {
    path: path.resolve(__dirname, 'public'),
    publicPath: "/",
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true,
              localIdentName: "[path]___[name]__[local]___[hash:base64:5]"
            }
          }
        ],
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.ejs'
    })
  ],
  devtool: 'source-map',
  resolve: {
    modules: [
      path.resolve(__dirname, "src"),
      "node_modules"
    ],
    extensions: ['.js', '.css'],
  }
}

Error log

ERROR in ./src/components/score.js
Module build failed: Error: /Users/yoneapp/Desktop/webpack-css-load-sample/src/components/score.js: Cannot find module 'common/style.css'
    at Function.Module._resolveFilename (module.js:470:15)
    at Function.resolve (internal/module.js:27:19)
    at getTargetResourcePath (/Users/yoneapp/Desktop/webpack-css-load-sample/node_modules/babel-plugin-react-css-modules/dist/index.js:99:20)
    at PluginPass.ImportDeclaration (/Users/yoneapp/Desktop/webpack-css-load-sample/node_modules/babel-plugin-react-css-modules/dist/index.js:127:36)
    at newFn (/Users/yoneapp/Desktop/webpack-css-load-sample/node_modules/babel-traverse/lib/visitors.js:276:21)
    at NodePath._call (/Users/yoneapp/Desktop/webpack-css-load-sample/node_modules/babel-traverse/lib/path/context.js:76:18)
    at NodePath.call (/Users/yoneapp/Desktop/webpack-css-load-sample/node_modules/babel-traverse/lib/path/context.js:48:17)
    at NodePath.visit (/Users/yoneapp/Desktop/webpack-css-load-sample/node_modules/babel-traverse/lib/path/context.js:105:12)
    at TraversalContext.visitQueue (/Users/yoneapp/Desktop/webpack-css-load-sample/node_modules/babel-traverse/lib/context.js:150:16)
    at TraversalContext.visitMultiple (/Users/yoneapp/Desktop/webpack-css-load-sample/node_modules/babel-traverse/lib/context.js:103:17)
    at TraversalContext.visit (/Users/yoneapp/Desktop/webpack-css-load-sample/node_modules/babel-traverse/lib/context.js:190:19)
    at Function.traverse.node (/Users/yoneapp/Desktop/webpack-css-load-sample/node_modules/babel-traverse/lib/index.js:114:17)
    at NodePath.visit (/Users/yoneapp/Desktop/webpack-css-load-sample/node_modules/babel-traverse/lib/path/context.js:115:19)
    at TraversalContext.visitQueue (/Users/yoneapp/Desktop/webpack-css-load-sample/node_modules/babel-traverse/lib/context.js:150:16)
    at TraversalContext.visitSingle (/Users/yoneapp/Desktop/webpack-css-load-sample/node_modules/babel-traverse/lib/context.js:108:19)
    at TraversalContext.visit (/Users/yoneapp/Desktop/webpack-css-load-sample/node_modules/babel-traverse/lib/context.js:192:19)
 @ ./src/components/box.js 13:13-40
 @ ./src/app.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/app.js

Demo code

https://github.com/yoneapp/webpack-css-load-sample

change 'common/style.css' to '../common/style.css'

taha
– taha

2017-07-12 23:43:57 +00:00
Commented Jul 12, 2017 at 23:43 — taha
– taha, Commented Jul 12, 2017 at 23:43

Dwayne Charrington · Accepted Answer · 2017-07-13 00:02:32Z

Try adding in an alias inside of your resolve block which should tell Webpack to resolve all imports from common/ to /src/common:

    resolve: {
        extensions: ['.js'],
        alias: {
          common: path.resolve(__dirname, 'src/common/'),
        }
    },

Also, you do not need to have .css inside of your extensions array either. This is only needed for automatically resolving files without an extension, but you probably don't want to do that for styles so you can clearly indicate in your code a stylesheet and a Javascript file.

The other solution of changing your import path will also work, but you'll find once you get more than 3 levels deep, writing ../../../../common/style.css will get very tiring. Aliases allow you to specify a root level where your imports are resolved, especially great if you have folders for constants, data stores and more in the root of your src directory.

If you would like to know more about aliases, the Webpack documentation here is a great resource. You can do other things with aliases as well, like exact matches.

Dan Kreiger · Accepted Answer · 2017-07-12 23:58:07Z

0

Given your project structure, I think you are using the wrong path to import the stylesheet to your component.

Try this from inside one of your components:

import style from '../common/style.css'

edited Jul 12, 2017 at 23:58

answered Jul 12, 2017 at 23:52

Dan Kreiger

5,5342 gold badges20 silver badges26 bronze badges

Comments

Kalaikumar Thangasamy · Accepted Answer · 2017-07-13 00:21:30Z

0

Add double dot and slash like below

import style from '../common/style.css'
import Score from '../components/score'

answered Jul 13, 2017 at 0:21

Kalaikumar Thangasamy

5642 silver badges8 bronze badges

Comments

yoneapp · Accepted Answer · 2017-08-11 00:35:56Z

Advice from Dwayne Charrington

This method worked a halfway.

ERROR in ./src/components/score.js
Module build failed: Error: /Users/yoneapp/Desktop/webpack-css-load-sample/src/components/score.js: Cannot find module 'common/style.css'
    at Function.Module._resolveFilename (module.js:485:15)
    at Function.resolve (internal/module.js:18:19)
    at getTargetResourcePath (/Users/yoneapp/Desktop/webpack-css-load-sample/node_modules/babel-plugin-react-css-modules/dist/index.js:99:20)
    at PluginPass.ImportDeclaration (/Users/yoneapp/Desktop/webpack-css-load-sample/node_modules/babel-plugin-react-css-modules/dist/index.js:127:36)
    at newFn (/Users/yoneapp/Desktop/webpack-css-load-sample/node_modules/babel-traverse/lib/visitors.js:276:21)
    at NodePath._call (/Users/yoneapp/Desktop/webpack-css-load-sample/node_modules/babel-traverse/lib/path/context.js:76:18)
    at NodePath.call (/Users/yoneapp/Desktop/webpack-css-load-sample/node_modules/babel-traverse/lib/path/context.js:48:17)
    at NodePath.visit (/Users/yoneapp/Desktop/webpack-css-load-sample/node_modules/babel-traverse/lib/path/context.js:105:12)
    at TraversalContext.visitQueue (/Users/yoneapp/Desktop/webpack-css-load-sample/node_modules/babel-traverse/lib/context.js:150:16)
    at TraversalContext.visitMultiple (/Users/yoneapp/Desktop/webpack-css-load-sample/node_modules/babel-traverse/lib/context.js:103:17)
    at TraversalContext.visit (/Users/yoneapp/Desktop/webpack-css-load-sample/node_modules/babel-traverse/lib/context.js:190:19)
    at Function.traverse.node (/Users/yoneapp/Desktop/webpack-css-load-sample/node_modules/babel-traverse/lib/index.js:114:17)
    at NodePath.visit (/Users/yoneapp/Desktop/webpack-css-load-sample/node_modules/babel-traverse/lib/path/context.js:115:19)
    at TraversalContext.visitQueue (/Users/yoneapp/Desktop/webpack-css-load-sample/node_modules/babel-traverse/lib/context.js:150:16)
    at TraversalContext.visitSingle (/Users/yoneapp/Desktop/webpack-css-load-sample/node_modules/babel-traverse/lib/context.js:108:19)
    at TraversalContext.visit (/Users/yoneapp/Desktop/webpack-css-load-sample/node_modules/babel-traverse/lib/context.js:192:19)
    at Function.traverse.node (/Users/yoneapp/Desktop/webpack-css-load-sample/node_modules/babel-traverse/lib/index.js:114:17)
 @ ./src/components/box.js 13:13-31
 @ ./src/app.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/app.js

The alias should be success, But, it was failure.
When babel-plugin-react-css-modules was removed, this worked.

It finally became a like this.

score.js

import React from 'react'
import styles from 'common/style.css'
import CSSModules from 'react-css-modules'

class Score extends React.Component {
  render() {
    return <div styleName="score">25</div>
  }
}

export default CSSModules(Score, styles)

webpack.config.js

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

module.exports = {
  entry: {
    app: './src/app.js'
  },
  output: {
    filename: 'assets/[name].[chunkhash].js',
    path: path.resolve(__dirname, 'public'),
    publicPath: "/",
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true,
              localIdentName: "[path]___[name]__[local]___[hash:base64:5]"
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.ejs'
    })
  ],
  resolve: {
    alias: {
      common: path.resolve(__dirname, 'src/common')
    }
  },
  devtool: 'source-map'
}

https://github.com/yoneapp/webpack-css-load-sample/tree/success

Collectives™ on Stack Overflow

How to root path loading of CSS in webpack

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related