Important Prefix not working or causes SassError

[sambedingfield]

The Important Prefix doesn't seem to be working for me in Vue CLI.

For example, p-2 works as expected.

When using <div class="!p-2"> the class has no affect.

When using @apply !p-2; I receive a Syntax Error: SassError: expected ";"

My setup:

"dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-horizontal": "^0.8.10",
    "vue-router": "^3.2.0",
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@windicss/plugin-question-mark": "^0.1.1",
    "@windicss/plugin-scrollbar": "^1.2.3",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "sass": "^1.26.5",
    "sass-loader": "^10",
    "vue-cli-plugin-windicss": "^1.0.4",
    "vue-template-compiler": "^2.6.11"
  },

[harlan-zw]

Hey @sambedingfield

Thanks for the issue. Can you see if this is still an issue with [email protected] for <div class="!p-2"> ?

The ! in the sass is a little tricky because the scss validation doesn't like it. Not sure if there's a solution available for that for now