加载css错误

Question

 ERROR in ./src/page/index/index.css

    Module parse failed: C:\Users\Administrator\Desktop\mukewang\src\page\index\index.css Unexpected token (2:4)

    You may need an appropriate loader to handle this file type.

    |

    | body{

    |     background: #cccccc;

    | }

     @ ./node_modules/style-loader!./src/page/index/index.css 4:14-38

"devDependencies": {
 "css-loader": "^0.28.7",
 "extract-text-webpack-plugin": "^3.0.1",
 "style-loader": "^0.19.0",
 "webpack": "^3.7.1"
},

var config = {
   entry: {
       'index': ['./src/page/index/index.js'],
       'login': ['./src/page/login/index.js'],
       'common':['./src/page/common/common.js']
   },
   output: {
       path: path.resolve(__dirname, './dist'),
       filename: 'js/[name].js'
   },
   externals:{
       'jquery':'window.jQuery'
   },
   module:{
       loaders:[
           { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader","css-loader") }
       ]
   },
   plugins:[
       new webpack.optimize.CommonsChunkPlugin({
           name :'common',
           filename:'js/base.js'
       })
       ,
       new ExtractTextPlugin("css/[name].css")
   ]
};

Answer 1

提问者 幕布斯2405234 2017-10-23 19:38:00

css文件：body{
   background: red;
}

webpack.config.js文件：

//webpack 2.0以上要先引入path
var path = require("path");
var webpack = require("webpack");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');

// 环境变量配置，dev / online
var WEBPACK_ENV = process.env.WEBPACK_ENV || 'dev';

// 获取html-webpack-plugin参数的方法
var getHtmlConfig = function(name){
   return {
       template    : './src/view/' + name + '.html',
       filename    : 'view/' + name + '.html',
       inject      : true,
       hash        : true,
       chunks      : ['common', name]
   };
};


var config = {
   entry: {
       'index': ['./src/page/index/index.js'],
       'login': ['./src/page/login/index.js'],
       'common':['./src/page/common/common.js']
   },
   output: {
       path: path.resolve(__dirname, './dist'),
       publicPath:'/dist/',
       filename: 'js/[name].js'
   },
   externals:{
       'jquery':'window.jQuery'
   },
   module:{
       loaders:[
           { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader','css-loader') },
           { test: /\.(gif|png|jpg|woff|svg|eot|ttf)\??.*$/, loader: 'url-loader?limit=100&name=resource/[name].[ext]' },
       ]
   },
   plugins:[
       //独立通用模块
       new webpack.optimize.CommonsChunkPlugin({
           name :'common',
           filename:'js/base.js'
       }),
       //把css打包到独立文件
       new ExtractTextPlugin("css/[name].css"),
       //html模版的处理，没有参数默认生成在dist目录
       new HtmlWebpackPlugin(getHtmlConfig('index'))
   ]
};


if('dev' === WEBPACK_ENV){
   config.entry.common.push('webpack-dev-server/client?http://localhost:8088/');
}

module.exports = config;

index.js文件：

'use strict';

var $$ = require('jquery');

//这里的./必须有
require('./index.css');

// $$('body').html("HELLO");
console.log('i am index');

package.json文件：

{
 "name": "src",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
   "start": "webpack-dev-server",
   "dev": "set WEBPACK_ENV=dev && webpack-dev-server --inline --port 8088",
   "dist": "set WEBPACK_ENV=online && webpack -p"
 },
 "author": "",
 "license": "ISC",
 "devDependencies": {
   "css-loader": "^0.28.7",
   "extract-text-webpack-plugin": "^3.0.1",
   "html-loader": "^0.5.1",
   "html-webpack-plugin": "^2.30.1",
   "style-loader": "^0.17.0",
   "url-loader": "^0.6.2",
   "webpack": "^3.7.1",
   "webpack-dev-server": "^2.9.3"
 },
 "dependencies": {}
}

Answer 2

Rosen 2017-10-23 18:46:16

把代码发给我吧，从这看不出来

• 提问者 幕布斯2405234 #1

  css文件：
   'use strict';
  // 这样配置jquery是全局的，不好
  var $$ = require('jquery');
  
  //这里的./必须有
  require('./index.css');
  
  // $$('body').html("HELLO");
  console.log('i am index');
  
  加载器：
  { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader','css-loader') },
  
  依赖：
  "devDependencies": {
      "css-loader": "^0.28.7",
      "extract-text-webpack-plugin": "^3.0.1",
      "html-loader": "^0.5.1",
      "html-webpack-plugin": "^2.30.1",
      "style-loader": "^0.17.0",
      "url-loader": "^0.6.2",
      "webpack": "^3.7.1",
      "webpack-dev-server": "^2.9.3"
    },

• 提问者 幕布斯2405234 #2

  老师你好，{ test: /\.css$/, loader: ExtractTextPlugin.extract('css-loader','style-loader') }, extract方法里面的参数第一个本来是style-loader，第二个是css-loader，我把css-loader写在前面就没啥问题了，能正常加载css文件，不知道这是什么科学原理？

• Rosen 回复 提问者 幕布斯2405234 #3

  这两个插件是有顺序的，style的结果再交给css-loader处理