如何在webpack中根目录加载CSS

时间：2017-07-12 23:39:13

标签： javascript css node.js reactjs webpack

以下css加载不起作用 import style from 'common/style.css'

可以使用根路径读取JavaScript import Score from 'components/score'

你可以给我一些建议吗？

源树

.
└── 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 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

4 个答案:

答案 0 :(得分：2)

尝试添加resolve块内的别名，该别名应告诉Webpack解析从common/到/src/common的所有导入：

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

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

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

如果您想了解有关别名的更多信息，Webpack文档here是一个很好的资源。您也可以使用别名执行其他操作，例如完全匹配。

答案 1 :(得分：0)

鉴于您的项目结构，我认为您使用错误的路径将样式表导入组件。

从你的一个组件中试试这个：

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

答案 2 :(得分：0)

添加双点和斜线，如下所示

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

答案 3 :(得分：-1)

来自Dwayne Charrington的建议

这种方法起了作用。

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

别名应该是成功的，但是，它是失败的 当删除babel-plugin-react-css-modules时，这很有效。

它终于变成了这样。

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

相关问题
最新问题