Issues with Scoped CSS

[abhishek2244]

trafficstars

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

{
  "name": "vuetutorial3-gh",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve --port 3000",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.21",
    "@fortawesome/free-solid-svg-icons": "^5.10.1",
    "@fortawesome/vue-fontawesome": "^0.1.6",
    "@types/fingerprintjs2": "^2.0.0",
    "@types/vue2-datepicker": "^2.12.0",
    "axios": "^0.19.0",
    "bootstrap": "^4.3.1",
    "bootstrap-vue": "^2.0.0-rc.27",
    "core-js": "^2.6.5",
    "fingerprintjs2": "^2.1.0",
    "vue": "^2.6.10",
    "vue-class-component": "^7.0.2",
    "vue-property-decorator": "^8.1.0",
    "vue-router": "^3.0.3",
    "vue2-datepicker": "^2.12.0",
    "vuetify": "^2.0.0",
    "vuex": "^3.0.1",
    "webpack-stream": "^5.2.1"
  },
  "devDependencies": {
    "@types/crypto-js": "^3.1.43",
    "@vue/cli-plugin-babel": "^3.10.0",
    "@vue/cli-plugin-typescript": "^3.10.0",
    "@vue/cli-service": "^3.10.0",
    "crypto-js": "^3.1.9-1",
    "css-loader": "^3.2.0",
    "node-sass": "^4.12.0",
    "postcss-scss": "^2.0.0",
    "sass": "^1.17.4",
    "sass-loader": "^7.1.0",
    "style-loader": "^1.0.0",
    "tslint-config-airbnb": "^5.11.1",
    "tslint-microsoft-contrib": "^6.2.0",
    "typescript": "^3.4.3",
    "vue-cli-plugin-vuetify": "^0.6.1",
    "vue-template-compiler": "^2.6.10",
    "vue-template-loader": "^1.0.0",
    "vuetify-loader": "^1.2.2",
    "webpack-bundle-analyzer": "^3.4.1"
  }
}

There are different scenarios to this problem, please find my vue.config.js below with scenarios:

1. Config A:

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /.html$/,
          loader: "vue-template-loader",
          exclude: /index.html/,
          options: {
            transformAssetUrls: {
              img: 'src'
            },
            scoped: true
          }
        },
        {
          enforce: 'post',
          test: /\.css$/,
          use: ['style-loader', 'css-loader']
        },
        {
          test: /\.scss$/,
          use: ['postcss-loader', 'sass-loader']
        },
        {
          enforce: 'post',
          test: /\.scss$/,
          use: ['style-loader', 'css-loader']
        }
      ]
    },
  },
}

2. Config B:

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /.html$/,
          loader: "vue-template-loader",
          exclude: /index.html/,
          options: {
            transformAssetUrls: {
              img: 'src'
            },
            scoped: true
          }
        },
      ]
    },
  },
}

For Config A the errors were in the screenshot 1 and for Config B they were in screenshot 2.

The issue which i mentioned has been encountered before and has been posted in the github issues but none of them helped me enough.

Looking forward for the response.

Thanks, **Screenshot 1 ** Screenshot 2

[kanian]

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?

[BonBonSlick]

guys this is a dead repo, do not expect any help