CSS support?

[fallenpeace]

Hi there! Awesome stuff with vuepack (vue 2). Already used it to push something to production.

On this new project I have to use regular .css files.

But when I place 'app.css' inside 'client/styles/app.css'

Webpack does not process them.

I've been comparing the webpack config files to another webpack files but I can not figure it out.

Please advice, thank you! I'm learning webpack so I'm really stump.

[egoist]

Yep, because we didn't add a css-loader for .css file, but you can still use .css file and load it in a .vue component:

<style src="./css/app.css"></style>

[egoist]

Oops, I think there's already loaders for .css https://github.com/egoist/vuepack/blob/master/template/build/webpack.dev.js#L23

What do you mean by "Webpack does not process them"?

[fallenpeace]

If you make a folder client/styles/, and add file style.css, add any rule. body { background: red }

npm run dev => style.css is never touched by webpack or compiled.
npm run build => style.css is never touched by webpack or compiled.

[egoist]

Did you load it in your component?

[FrancosLab]

So including it via <style src="./css/app.css"></style> works, thank you! I was unaware of this syntax for .vue files.

A bug that I have ran into is that if you have background: url('../assets/image.png'); in app.css.

Webpack will find the file and process it, it works prefectly fine with npm run dev however with npm run build it gets converted to background: url(../assets/assets/image.png'); but the build path for the image assets/image.png, so the browser wont find the image because it gets compiled to the wrong folder.

[egoist]

I've just flatten the dist directory, now it's ./dist instead of ./dist/assets, and a file-loader was added to support importing images and fonts in your app:

{
  test: /\.(ico|jpg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
  loader: 'file',
  query: {
    name: 'static/media/[name].[hash:8].[ext]'
  }
}

The path to static file you import will be ./dist/static/media/name.extension, and the index file will be ./dist/index.html, the bundled script ./dist/vendor.xxx.js and so on.

Now it should work when you run npm run build 😃