Once I include the "vue-cli-plugin-windicss" plugin in my "package.json" file,

devDependencies:{
"vue-cli-plugin-windicss": "^1.1.6",
}

my page will look like this:

On the contrary, if I remove this plugin and run the command "vue-cli-service serve" again, the page will look like this, everything will be back to normal.

I swear I have never written this strange code anywhere.

var _ = require("!!../node_modules/lodash/lodash.js");module.exports = function (templateParams) { with(templateParams) {return (function(data) { var __t, __p = ''; __p += '\n\n \n \n \n \n \n \n \n \n \n
\n \n\n'; return __p })();}}

node v14.16.0

TypeError: Cannot read property 'extraTransformTargets' of undefined
at Object.isDetectTarget (F:\Projects\wocenter-admin-ui\node_modules@windicss\plugin-utils\dist\index.js:662:29)
at Object.include [as resource] (F:\Projects\wocenter-admin-ui\node_modules\windicss-webpack-plugin\dist\plugin.cjs:159:40)
at RuleSet._run (F:\Projects\wocenter-admin-ui\node_modules\webpack\lib\RuleSet.js:492:30)
at RuleSet._run (F:\Projects\wocenter-admin-ui\node_modules\webpack\lib\RuleSet.js:547:10)
at RuleSet.exec (F:\Projects\wocenter-admin-ui\node_modules\webpack\lib\RuleSet.js:475:8)
at F:\Projects\wocenter-admin-ui\node_modules\webpack\lib\NormalModuleFactory.js:270:34
at F:\Projects\wocenter-admin-ui\node_modules\neo-async\async.js:6883:13
at F:\Projects\wocenter-admin-ui\node_modules\webpack\lib\NormalModuleFactory.js:215:9
at F:\Projects\wocenter-admin-ui\node_modules\enhanced-resolve\lib\Resolver.js:180:13
at F:\Projects\wocenter-admin-ui\node_modules\enhanced-resolve\lib\Resolver.js:284:24
at eval (eval at create (F:\Projects\wocenter-admin-ui\node_modules\tapable\lib\HookCodeFactory.js:33:10), :12:1)
at F:\Projects\wocenter-admin-ui\node_modules\enhanced-resolve\lib\UnsafeCachePlugin.js:43:26
at F:\Projects\wocenter-admin-ui\node_modules\enhanced-resolve\lib\Resolver.js:284:24
at eval (eval at create (F:\Projects\wocenter-admin-ui\node_modules\tapable\lib\HookCodeFactory.js:33:10), :12:1)
at F:\Projects\wocenter-admin-ui\node_modules\enhanced-resolve\lib\Resolver.js:284:24
at eval (eval at create (F:\Projects\wocenter-admin-ui\node_modules\tapable\lib\HookCodeFactory.js:33:10), :27:1)
npm ERR! code ELIFECYCLE

I've been trying out Windi CSS and Vue CLI 4, which has been working great with npm run serve but now I've come to build, I keep running into SyntaxError Unclosed string errors.

After trying to escape or remove the empty pseudo content:"";, I just run into similar errors, so something's not right 🤔

There's nothing helpful in the logs and npm run lint doesn't return any errors.

Any help much appreciated!

Here's my setup...

// package.json
{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --modern",
    "lint": "vue-cli-service lint",
    "report": "vue-cli-service build --modern --report --report-json"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "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-animations": "^1.0.9",
    "@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"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/strongly-recommended",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {
      "vue/max-attributes-per-line": 0,
      "vue/singleline-html-element-content-newline": 0,
      "vue/no-unused-vars": "off",
      "no-unused-vars": "off"
    },
    "globals": {
      "__webpack_public_path__": "writable"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 2%",
    "not dead",
    "last 2 versions",
    "not ie <= 11",
    "safari >= 10",
    "iOS >= 10"
  ]
}

// vue.config.js
module.exports = {
  productionSourceMap: false,
  css: {
    extract: false,
    loaderOptions: {
      postcss: {
        config: {
          path: __dirname
        }
      }
    }
  }
}

Additional notes:

• SCSS syntax looks okay across the board.
• SCSS is written within components using <style lang="scss">.
• I was using Vue CLI 3 before installing vue-cli-plugin-windicss and before using Windi with no issues.

Hi, I tried a couple of hours trying to find the problem, but I failed.
version:
@vue/cli 4.4.6

In my vue.config.js:

// vue.config.js
module.exports = {
  pluginOptions: {
    windicss: {
      // see https://github.com/windicss/vite-plugin-windicss/blob/main/packages/plugin-utils/src/options.ts
      scan: {
        dirs: ['./'],
        exclude: ['node_modules', '.git'],
      },
    },
  },
}

also tried:

// vue.config.js
module.exports = {
  pluginOptions: {
    windicss: {
      // see https://github.com/windicss/vite-plugin-windicss/blob/main/packages/plugin-utils/src/options.ts
      scan: {
        dirs: ['src', 'public', 'views'], // because my html files are in the views directory.
        exclude: ['node_modules', '.git'],
        include: ['views'] // I also tried to add it at here.
      },
    },
  },
}

Do I need to import windicss manually?

I tried Utility Groups feature:

 .bg-gray-200 hover:(bg-gray-100 text-red-300)

Code above works well when I use yarn serve or npm run serve, but won't work when I tried to build the project.

Vue Cli: 4.5
Vue: 3+

environment:
node v16.13.0
vue-cli 4.5.15

problem:

Please help

I see the underlying windicss-webpack-plugin reference the latest windi, but when I try to upgrade with:

vue upgrade

or

yarn upgrade-interactive --latest

and both do not offer to upgrade the windicss sub-dependency.

test-project.zip

Download test.project.zip

yarn install
yarn serve

I use vue-cli create this project and use minimal setting:

If you uncomment div style in components/HelloWorld.vue will cause error output:

<style lang="scss">
  body {
    background: #42b983;
    // div {
    //   color: #ddd;
    // }
  }
</style>

https://segmentfault.com/q/1010000042289975

69% building 1985/2008 modules 23 active D:\Document And Settings2\kongccc\Desktop\cli-max\cli\node_modules@ant-design\icons-vue\es\icons\VerticalAlignTopOutlined.js

Hi
I start a project using Vue CLI with Vue3 and TS
I use vue add windicss
In my main.ts I have import 'windi.css';

But I have the following problem

Unable to resolve path to module 'windi.css' import/no-unresolved
@ multi (webpack)-dev-server/client?http://192.168.1.47:8081&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts

Any ideas to solve it?

vue add windicss

📦 Installing vue-cli-plugin-windicss...

yarn add v1.22.4
info No lockfile found.
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
error [email protected]: The engine "node" is incompatible with this module. Expected version "^12.20.0 || ^14.13.1 || >=16.0.0". Got "12.19.0"
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
error Found incompatible module.
ERROR command failed: yarn add vue-cli-plugin-windicss -D --tilde

Hi!

I would like to report a bug. I followed instruction and setup success plugin to vue-cli v4. Everything seem working perfect with default, but when i try to modify color pallette site not apply new color, but from Windi css: analysis command (windicss vscode extension) i saw color reported as changed.

Look like vscode's extension compile correct, but vue-cli plugin compile not correct.

This is my tailwind.config.js:

const colors = require('windicss/colors');

module.exports = {
  important: true,
  darkMode: 'class', // or 'media' or 'class'
  theme: {
    extend: {
      container: {
        center: true,
        padding: '1.5rem',
      },
      screens: {
        // add media print screen
        print: { raw: 'print' },
      },
      colors: {
        cyan: colors.cyan,
        primary: colors.emerald,
        green: colors.emerald,
        gray: colors.blueGray,
      },
    },
  },
  variants: {
    extend: {
      display: ['group-hover'],
      visibility: ['group-hover'],
      borderWidth: ['first', 'last'],
      borderRadius: ['first', 'last'],
    },
  },
};

Colors: primary show purple, not emerald. grayshow default, not cool gray etc.

Update: After spend a hour testing and play with config. i found we have some issue:

1. In README i saw we have meantion:
   If you have a tailwind.config.js, please rename it to windi.config.js or windi.config.ts.. This message is important, but stay in small position and hard to catch by eyes.
2. Although had meantion about "must use filename windi.config.{js|ts} but actually i still can leave filename tailwind.config.{js|ts} and add one more property config: "..." in vue.config.js like this:

pluginOptions: {
    windicss: {
      // see https://github.com/windicss/vite-plugin-windicss/blob/main/packages/plugin-utils/src/options.ts
      scan: {
        dirs: ['./src'],
        exclude: [
          'node_modules',
          '.git',
          'public/**/*',
          '*.template.html',
          'index.html',
          'dist',
        ],
        include: [],
      },
      transformCSS: 'pre',
      compile: false,
      config: 'tailwind.config.js' // <- here , copy from config of other windicss plugin
    },
  },

Plugin will working normally, no throwing any warning and error, but look like content not be read and lead to issue i reported above (about color not applied).

3. If i leave property config: "..." in vue.config.js and change filename tailwind.config.* to windi.config.* when running vue-cli i will get mesasge not found config file.
4. if i remove config: "..." and change filename to windi.config.* then everything work perfect. Config file applied.

So... I think i found workaround, but it still be a bug. Hope my explains help plugin can be fixed.

Thank you!!

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"
  },

Hi,

I'm trying to to add styles to the body on a Vue CLI 4 app, but the classes are ignored by the plugin. The style are not generated.

I tried to force the scanning with the extract.include option or the pluginOptions, with no effect.

To reproduce :

• vue create vue-app
• vue add windicss
• add bg-red-500 to the body
• npm run serve

On @vue/cli 4.5.12

Edit:
Seeing the plugin source, i can see that the public folder and index.html are ignored by default, which seems to come from the windi webpack plugin ?

Tried to override it, I had to add my classes to the safelist option.
This is a real downside for me compared to the vite plugin, who directly works with index.html.