Vue-material: import 'vue-material/dist/vue-material.css' doesnt work and gives an error in webpack 2

[DevEclipse]

I can't import the css using webpack simple

i think its better if the css file is coupled in the vue-material.js rather than importing it separately

[stbaer]

Maybe the webpack css loader doesn't include the node_modules folder?

[marcosmoura]

Have you managed to fix this issue. Sorry about the delay to answer it.

[ralphchristianeclipse]

no solution for the import but i've copied and pasted the vue-material-css lol to the App.vue

[ralphchristianeclipse]

i mean ive used

<style src=".../node_modules/vue-material/dist/vue-material.css"></style>

[marcosmoura]

Can you post your webpack config somewhere? I can take a look.

[ralphchristianeclipse]

here its just the default vue cli webpack-simple template with babel-polyfill

var path = require('path')
var webpack = require('webpack')

module.exports = {
    entry: ['babel-polyfill','./src/main.js'],
    output: {
        path: path.resolve(__dirname, './dist'),
        publicPath: '/dist/',
        filename: 'build.js'
    },
    module: {
        rules: [{
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
                        // the "scss" and "sass" values for the lang attribute to the right configs here.
                        // other preprocessors should work out of the box, no loader config like this nessessary.
                        'scss': 'vue-style-loader!css-loader!sass-loader',
                        'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax',
                        'css': 'vue-style-loader!css-loader'
                    }
                    // 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.common.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
        })
    ])
}

[marcosmoura]

I will install the new webpack simple template and I will get back here with an solution.

[ralphchristianeclipse]

oh alright, thanks :)

[Samuell1]

@ralphchristianeclipse you need to add loader for .css files for webpack

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

[joshbodine21]

I have the same issue. Webpack fails when I import the css per the installation guide, and I too have the default vue cli webpack-simple template with babel-polyfill. It would be nice if it was packaged and not necessary to import separately.

[joshbodine21]

Any chance the CSS will be coupled with Vue.user(VueMaterial) so as not to have to include it separately and run into the webpack issue?

[marcosmoura]

No way. This shouldn't be done like that. That's because the library works in any environments.
Also, the documentation website is built on top of Webpack 2.

[RVidal111]

My solution is create a src/assets/css/app.css file and include this declaration:
@import "./././node_modules/vue-material/dist/vue-material.css";
Add in the index.html file this link in the header:
<!-- APP Stylesheet -->
<link rel="stylesheet" type="text/css" href="src/assets/css/app.css">

[Samuell1]

@RVidal111 you dont need import with ./././ ... you can simply use @import '~vue-material/dist/vue-material.css'; but better is import it in main.js file

[St-Ex]

Using webpack simple

npm install --save vue-material

Then in app.vue

<style src="vue-material/dist/vue-material.css"></style>

[adityaism]

@DevEclipse create an alias at webpack config

resolve: {
alias: {
  'vue$': 'vue/dist/vue.esm.js',
  'vue-material-home':'vue-material/dist/'
 }
 ..},

then import at main.js as

 import 'vue-material-home/vue-material.css'

NB: keep alias name anything except vue-material., that was giving me error.