vue+webpack

Question

使用vue+webpack装载css文件报错，已安装了：npm install css-loader style-loader --save-dev，代码如下：

import './a.css';
var Vue = require('vue')
var App = require('./app.vue')

new Vue({
  el: 'body',
  components: {
    app: App
  }
})

页面报错信息如下：

./src/main.js
Module parse failed: E:\code\myvue\src\main.js Line 2: Unexpected token
You may need an appropriate loader to handle this file type.
| //import './libs/plugins/bootstrap-3.1.1/css/bootstrap.css';
| import './a.css';
| 
| var Vue = require('vue')
 @ multi main

哪位高手可以解答下不？

Answer 1

第一：贴出你的webpack的config文件来。

第二： 你确定是使用 import './a.css'在js里面，而不是 require

欢迎加群： 240319632 讨论 vue的问题

Answer 2

检查下你的webpack.config.js里的配置，看看cssloader是否已配置

我这么写的

{
  test: /\.css$/,
  loaders: ['style', 'css']
},

Answer 3

webpack文件如下：

var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: './dist',
    publicPath: 'dist/',
    filename: 'build.js'
  },
  module: {
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue'
      },
      {
        // edit this for additional asset file types
        test: /\.(png|jpg|gif)$/,
        loader: 'file?name=[name].[ext]?[hash]'
      },{
        test: /\.css$/, // Only .css files
        loader: 'style!css' // Run both loaders
      }
    ]
  },
  // example: if you wish to apply custom babel options
  // instead of using vue-loader's default:
  babel: {
    presets: ['es2015', 'stage-0'],
    plugins: ['transform-runtime']
  }
}

if (process.env.NODE_ENV === 'production') {
  module.exports.plugins = [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    }),
    new webpack.optimize.OccurenceOrderPlugin()
  ]
} else {
  module.exports.devtool = '#source-map'
}

Answer 4

可以参考一下我写的Demo

vue-sui-demo