javascript - 如何在 webpack 中根路径加载 CSS

Question

下面的css加载不起作用。
从“common/style.css”导入样式

JavaScript可以通过根路径读取。
从'components/score'导入分数

你能给我一些建议吗？

源码树

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

分数.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 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

演示代码

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

Answer 1

尝试在 resolve block 中添加一个别名，它应该告诉 Webpack 解析从 common/ 到 /src/common 的所有导入:

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

此外，您也不需要在extensions 数组中包含.css。这仅在自动解析不带扩展名的文件时需要，但您可能不想对样式执行此操作，因此您可以在代码中清楚地指示样式表和 Javascript 文件。

更改导入路径的其他解决方案也可以工作，但是一旦深入超过 3 个级别，您就会发现编写 ../../../../common/style.css 会很累。别名允许您指定解析导入的根级别，如果您在 src 目录的根目录中有用于常量、数据存储等的文件夹，这尤其有用。

如果您想了解更多关于别名的信息，Webpack 文档 here是一个很好的资源。您还可以使用别名做其他事情，例如完全匹配。