webpack引入css报错cannot resolve module ‘style’?

正确安装了webpack以及相关插件和依赖,
webpack.config.js配置如下:

module.exports = {
    entry: './entry.js',
    output: {
        path: __dirname, 
        filename: 'bundle.js' 
    },
    module: {
        loaders: [
            {test: /\.js$/, exclude: /node_modules/, loader: 'react-hot!babel'},
            {test: /\.css$/, loader: 'style!css'}
        ]
    }
};

entry.js引入css:

import './node_modules/semanticui/dist/style.css';

style.css里就写了一条:

body {
    color: red;
}

然后在命令行里启动一下,一切正常,css成功引入。
但是我把style.css替换成同目录下的semantic.css,修改下配置,启动后会报错

ERROR in ./entry.js
Module not found: Error: Cannot resolve module 'semantic' in /Users/zaxlct/Desktop/react-first

webpack.config.js是这么配置的 :

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

entry.js是这么写的:

import './node_modules/semantic-ui/dist/semantic.css';

注:semantic-ui是 直接 npm install semantic下载到项目里的,个人感觉问题出在semantic上,但是不知道具体怎么解决

附上 semantic.css前几行代码:

@import url('https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic&subset=latin');

*,
*:before,
*:after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

input[type="text"],
input[type="email"],
input[type="search"],
input[type="password"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  /* mobile firefox too! */
}
阅读 13.4k
1 个回答

感觉题主还不知道什么是 loader ...

{test: /\.css$/, loader: 'semantic!css'}
semantic 改回 style

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题