Vue-awesome-swiper: Webpack on build ERROR in swiper.css

Created on 21 Jun 2017  路  2Comments  路  Source: surmon-china/vue-awesome-swiper

Version: webpack 2.6.1
Time: 2676ms
   Asset     Size  Chunks                    Chunk Names
build.js  1.41 MB       0  [emitted]  [big]  main

ERROR in ./~/swiper/dist/css/swiper.css
Module parse failed: /app/node_modules/swiper/dist/css/swiper.css Unexpected token (15:0)
You may need an appropriate loader to handle this file type.
|  * Released on: March 10, 2017
|  */
| .swiper-container {
|   margin-left: auto;
|   margin-right: auto;
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-awesome-swiper/swiper.vue 18:2-39
 @ ./~/vue-awesome-swiper/swiper.vue
 @ ./~/vue-awesome-swiper/index.js
 @ ./client/main.js

webpack.config.js

/**
 * Created by imkarma on 21/06/17.
 */
var path = require('path')
var webpack = require('webpack')

module.exports = {
    entry: './client/main.js',
    output: {
        path: path.resolve(__dirname, './public/js'),
        publicPath: '/public/js/',
        filename: 'build.js'
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
}
// other vue-loader options go here
}
},
{
    test: /\.js$/,
        loader: 'babel-loader',
    exclude: /node_modules/
},
{
    test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
    options: {
    name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
    alias: {
        'vue$': 'vue/dist/vue.esm.js'
    }
},
devServer: {
    historyApiFallback: true,
        noInfo: true
},
performance: {
    hints: false
},
devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
    module.exports.devtool = '#source-map'
    // http://vue-loader.vuejs.org/en/workflow/production.html
    module.exports.plugins = (module.exports.plugins || []).concat([
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"production"'
            }
        }),
        new webpack.optimize.UglifyJsPlugin({
            sourceMap: true,
            compress: {
                warnings: false
            }
        }),
        new webpack.LoaderOptionsPlugin({
            minimize: true
        })
    ])
}

.babelrc

{
  "presets": [
    ["env", { "modules": false }]
  ]
}
"dependencies": {
    "amqplib": "^0.5.1",
    "connect": "3.0.1",
    "express": "4.14.0",
    "minimist": "1.1.0",
    "morgan": "1.7.0",
    "rx": "^4.1.0",
    "sc-framework-health-check": "~1.0.0",
    "sc-hot-reboot": "~1.0.0",
    "scc-broker-client": "~1.2.1",
    "serve-static": "1.11.2",
    "socketcluster": "~5.11.0",
    "socketcluster-client": "~5.3.1",
    "uuid": "^3.0.1",
    "vue": "^2.3.3",
    "vue-awesome-swiper": "^2.5.0"
  }

"devDependencies": {
    "@types/amqplib": "^0.5.1",
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "babel-preset-env": "^1.5.1",
    "babel-preset-es2015": "^6.24.1",
    "cross-env": "^3.0.0",
    "css-loader": "^0.25.0",
    "file-loader": "^0.9.0",
    "vue-loader": "^12.1.0",
    "vue-template-compiler": "^2.3.3",
    "webpack": "^2.6.1",
    "webpack-dev-server": "^2.4.5"
  }

command: cross-env NODE_ENV=development webpack --progress --hide-modules

Most helpful comment

Find my mistake, need add

{
    test: /\.css$/,
    use: [ 'style-loader', 'css-loader' ]
 }

in my webpack config

All 2 comments

Find my mistake, need add

{
    test: /\.css$/,
    use: [ 'style-loader', 'css-loader' ]
 }

in my webpack config

41

104

Was this page helpful?
0 / 5 - 0 ratings

Related issues

tilight picture tilight  路  5Comments

Ivan-blade picture Ivan-blade  路  6Comments

tbcinteractive picture tbcinteractive  路  6Comments

Bobur-kobilov picture Bobur-kobilov  路  4Comments

pfasang picture pfasang  路  5Comments