请稍等 ...
×

采纳答案成功!

向帮助你的同学说点啥吧!感谢那些助人为乐的人

css模块化,样式无法引入问题

按老师教的方法写的,检查了几遍,没有问题,打包也成功了,但新定义的样式就是无法生效,相关文件截图如下:

css样式

https://img1.sycdn.imooc.com/szimg//59199a92000151c106530278.jpg

package.json

https://img1.sycdn.imooc.com/szimg//59199a96000181bb05100621.jpg

运行结果

https://img1.sycdn.imooc.com/szimg//59199a9b000178ad15440912.jpg


webpack.config.js

var webpack = require('webpack');  //引用webpack包

var WebpackDevServer = require('webpack-dev-server');

var path = require('path');


module.exports = {

  context: __dirname+'/src',

  entry: "./js/index.js",  //配置入口文件

  module: {

    loaders: [

      {

        test: /\.js?$/,  //匹配js文件

        exclude: /(node_modules)/, //跳过所有node_modules的文件夹

        loader: 'babel-loader',  //使用babel-loader编译代码

        query: {

          presets: ['react', 'es2015'], //加载react和es2015的包

          plugins: ['react-html-attrs']

        }

      },

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

    ]

  },

  output: {

    path: __dirname+'/src/',

    filename: "bundle.js"  //输出

  }

};


正在回答 回答被采纳积分+3

插入代码

2回答

Parry 2017-05-15 20:35:34

看起来是 style-loader!css-loader 没有加载,你直接调试元素看看样式是否有加载,没有重新安装这两个包测试下。

0 回复 有任何疑惑可以回复我~
  • 提问者 jeanneze #1
    在chrome 调试工具里查看过了,样式没有加载,这两个插件还需要全局安装吗?我只在项目根目录里安装了,安装完后,我看package.json的依赖配置里也有了
    回复 有任何疑惑可以回复我~ 2017-05-15 20:41:54
  • Parry 回复 提问者 jeanneze #2
    不需要全局安装,你或者用我建的空项目模板测试下看看,https://github.com/ParryQiu/React-Webpack2-HMR-Template
    回复 有任何疑惑可以回复我~ 2017-05-15 20:59:25
  • 提问者 jeanneze 回复 Parry #3
    刚下载看了,里面没有配置style-loader和css-loader的方法
    回复 有任何疑惑可以回复我~ 2017-05-15 22:23:57
提问者 jeanneze 2017-05-15 20:13:43

补充:

footer.js及其目录结构:

https://img1.sycdn.imooc.com/szimg//59199b5f0001991e10570542.jpg

0 回复 有任何疑惑可以回复我~

相似问题

登录后可查看更多问答,登录/注册

问题已解决,确定采纳
还有疑问,暂不采纳
意见反馈 帮助中心 APP下载
官方微信