Open abhishek2244 opened 5 years ago
Hi @ktsn, I do have an issue similar to @abhishek2244 .
My package.json:
{
"name": "typescript-vue",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.3.2",
"vue": "^2.6.10",
"vue-class-component": "^7.0.2",
"vue-property-decorator": "^8.3.0",
"vue-template-loader": "^1.0.0",
"webpack-stream": "^5.2.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^4.0.0",
"@vue/cli-plugin-typescript": "^4.0.0",
"@vue/cli-service": "^4.0.0",
"css-loader": "^3.2.0",
"style-loader": "^1.0.0",
"typescript": "~3.5.3",
"vue-template-compiler": "^2.6.10"
}
}
Here is my webpack config:
module: {
rules: [
{
test: /\.html$/,
loader: "vue-template-loader",
options: {
scoped: true
},
exclude: /index.html/
},
{
test: /\.css$/,
enforce: 'post',
use: [
"style-loader", //2. Extract css into style tags
"css-loader" //1. Turns css into commonjs
]
}
]
I have an App.ts file that looks like this:
import { Component, Vue } from "vue-property-decorator"
import HelloWorld from "./components/HelloWorld"
import WithRender from "./App.html?style=./App.css"
@WithRender
@Component({
components: {
HelloWorld
}
})
export class App extends Vue {}
An App.css that contains some boring css:
.app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
Overall project structure is very simple, as I am just taking vue-template-loader for a spin:
OK, so after quite some times reading the docs , I still get this error:
Any idea what I am doing wrong here?
guys this is a dead repo, do not expect any help
Hi @ktsn ,
I am building an application using vue and typescript. While going through how i could use the same syntax with vue, i came across vue decorators and vue-template-loader. While integrating the loader to use scoped styles I encountered several issues. I have followed all the instructions that has been listed in the docs to use scoped styles while loading html. I have tried almost all the configurations which you have mentioned and also from the issues as well.
package.json
There are different scenarios to this problem, please find my
vue.config.js
below with scenarios:module.exports = { configureWebpack: { module: { rules: [ { test: /.html$/, loader: "vue-template-loader", exclude: /index.html/, options: { transformAssetUrls: { img: 'src' }, scoped: true } }, ] }, }, }