Comments (6)
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>
from vuepack.
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"?
from vuepack.
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.
from vuepack.
Did you load it in your component?
from vuepack.
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.
from vuepack.
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
from vuepack.
Related Issues (20)
- Missed packages HOT 5
- Is it possible to proxy requests to backend with dev server? HOT 3
- [Suggestion] Add babel-polyfill to the project HOT 1
- i create project npm run app electron empty.!! HOT 3
- Base project prod build packs up entire project folder HOT 3
- App crashed after deployed on Heroku. But it's working in my local. HOT 17
- How to configure ES7 support? HOT 1
- Node version 8.4 Support HOT 1
- `htmlWebpackPlugin is not defined` error during initialization HOT 1
- Unit tests configurations
- dynamic import in vue-router css and less file is not loaded
- HOT Reload is not working HOT 3
- Norton says that your site uses a coin miner HOT 1
- Docker deployment image HOT 1
- Switch to Parcel HOT 2
- [question] Why is localhost:4000 showing only a blank page?
- Vue-router: History Mode - Built app blank on public subdirectory
- IE 11 support?
- I have this problem with heroku and my discord bot it dont go online HOT 1
- Vuepack 4.0 progress
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vuepack.