Skip to content
Permalink
Browse files

Scoped CSS und eine weitere Komponente für das Testing

  • Loading branch information...
Mcafee123 committed Apr 21, 2019
1 parent 8e1e6d5 commit c9054ca61363641935c6c97351f5beb113d1b139

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
@@ -44,9 +44,9 @@
"css-loader": "^2.1.1",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.6.0",
"node-sass": "^4.11.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"typescript": "^3.4.4",
"vue": "^2.6.10",
"vue-property-decorator": "^8.1.0",
@@ -1,4 +1,5 @@
<div>
<h1>App.ts</h1>
<h5>Hello {{ name }}</h5>
<test></test>
</div>
@@ -1,9 +1,14 @@
import { Component, Vue } from 'vue-property-decorator'
import WithRender from './App.html?style=./App.scss'
import 'style/global.scss'
import Test from 'components/Test'

@WithRender
@Component({
name: 'App'
name: 'App',
components: {
Test
}
})
export default class App extends Vue {

@@ -0,0 +1,3 @@
<div>
<h5>{{ name }}</h5>
</div>
@@ -0,0 +1,3 @@
div {
background-color: lightcoral;
}
@@ -0,0 +1,12 @@
import { Component, Vue } from 'vue-property-decorator'
import WithRender from './Test.html?style=./Test.scss'

@WithRender
@Component({
name: 'Test'
})
export default class Test extends Vue {

public name = 'Test'

}
@@ -0,0 +1,3 @@
body {
font-family: 'Open Sans', sans-serif;
}
@@ -1,5 +1,6 @@
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
// Change to your "entry-point".
@@ -36,12 +37,23 @@ module.exports = {
},{
test: /\.html$/,
loader: 'vue-template-loader',
options: {
scoped: true,
hmr: false,
},
exclude: /index.html/,
},{
test: /\.scss$/,
enforce: 'post', // damit werden scoped css möglich, siehe vue-template-loader options
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: MiniCssExtractPlugin.loader,
options: {
// you can specify a publicPath here
// by default it uses publicPath in webpackOptions.output
publicPath: '../',
hmr: true,
}
},{
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "sass-loader", // compiles Sass to CSS
@@ -62,6 +74,12 @@ module.exports = {
template: 'src/index.html',
inject: true,
filename: 'index.html' //relative to root of the application
}),
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: 'app.bundle.css',
chunkFilename: '[id].css',
})
]
}

0 comments on commit c9054ca

Please sign in to comment.
You can’t perform that action at this time.