开发者社区> 问答> 正文

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! */
}

展开
收起
杨冬芳 2016-06-08 10:35:58 3849 0
1 条回答
写回答
取消 提交回答
  • 码农|Coder| Pythonista

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

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

    2019-07-17 19:31:19
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
零基础CSS入门教程 立即下载
基于webpack和npm的前端组件化实践 立即下载
23-Vue.js在前端...1506518547.pdf 立即下载