CODEWITHSUNDEEP
javascriptwebpackvue.js
Jeremy Thomas
Jeremy Thomas

Reputation: 6674

First vue/webpack app and there is no webpack.config file

I cannot seem to get my app to load css files properly and I thought it might have to do with the fact that my app seems to be using webpack, but there is no webpack.config.js file in the root.

I have webpack.base.conf.js and webpack.dev.conf.js and webpack.prod.conf.js but they are all in the ./build folder.

Is this wrong?

Upvotes: 1

Views: 715

Answers (2)

François Romain
François Romain

Reputation: 14393

It looks like you use the webpack template from vue-cli. in this template, the dev, start and build npm scripts from package.json point to the /build/dev-server.js and /build/build.js. These two files use the webpack Node.js api to load the webpack config from the /build directory.

The webpack vuejs-template is an advanced setup, which is not aimed at being modified. It is configurable from the /config directory.

I would recommend to start with the webpack-simple template which is easier to grasp.

Also, if you use an external css file, it has to be required from javascript to be processed. 

import '../css/styles.css'

Upvotes: 0

Badacadabra
Badacadabra

Reputation: 8497

No, this is perfectly right. But since you are talking about CSS files, I am wondering if you are not misusing the Webpack template...

If you select this template, you are supposed to write most of your CSS code in single file components, along with templates and scripts. In your project, Webpack uses vue-loader with PostCSS to process your style rules. You can of course create static stylesheets (CSS files in the static folder), but you should use this feature sparingly to respect the modular nature of Vue.

(To have an example of a single file component, open App.vue and look at the code.)

Upvotes: 1

Related Questions