Warm tip: This article is reproduced from serverfault.com, please click

Webpack-Tailwind CSS清除会删除所有黑暗的类

(Webpack - Tailwind css purge removes all dark classes)

发布于 2020-11-24 12:32:00

我有一个非常简单的项目,它使用了几种扩展到主题的颜色。当我在tailwind.config.js文件中启用清除功能时,所有内容均应清除,但我所有的暗类也都清除了。

有人有同样的问题吗?我也在 tailwind 的git上发现了与此有关的问题:https : //github.com/tailwindlabs/tailwindcss/discussions/2793

我的资源位于

[PROJECT FOLDER]
-resources
  -js
    -components
      Login.Vue

我不知道是否值得一提,但是我为tailwind创建了一个culon scss文件,该文件导入了它的基础,组件和实用程序,并将其作为条目添加到我的webpack.config.js中,以加快Webpack的编译速度。

tailwind.config.js

module.exports = {
  purge: {
    enabled: true,
    content: [
      './resources/js/components/**/*.vue',
      './resources/js/**/*.vue',
      './index.php'
    ],
  },
  darkMode: 'class', // or 'media' or 'class'
  theme: {
    extend: {
      fontFamily: {
        'raleway': ['Raleway', 'Arial', 'sans-serif']
      },
      colors: {
        'primary': '#ffc531',
        'primaryDark': '#ca9100',
        'backgroundDark': '#f2f2f2',
        'dark-text-primary': '#d2d2d2',
        'dark-background': '#292929',
        'dark-background-light': '#3e3d3d'
      }
    }
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

package.json

{
  "scripts": {
    "watch": "npm run dev -- --watch",
    "dev": "webpack --mode development --progress",
    "build": "webpack --mode production --progress"
  },
  "devDependencies": {
    "@babel/cli": "^7.12.1",
    "@babel/core": "^7.12.3",
    "@babel/preset-env": "^7.12.1",
    "@vue/cli": "^4.5.8",
    "autoprefixer": "^9.0.0",
    "babel-loader": "^8.1.0",
    "css-loader": "^5.0.1",
    "eslint": "^7.13.0",
    "eslint-plugin-vue": "^7.1.0",
    "extract-loader": "^5.1.0",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^4.5.0",
    "node-sass": "^5.0.0",
    "postcss-loader": "^4.0.4",
    "sass-loader": "^10.0.5",
    "style-loader": "^2.0.0",
    "tailwindcss": "^2.0.1",
    "uglify-js": "^3.11.5",
    "vue": "^2.6.12",
    "vue-loader": "^15.9.5",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.6.12",
    "webpack": "^4.32.2",
    "webpack-cli": "^3.3.2",
    "webpack-dev-server": "^3.5.1"
  },
  "dependencies": {
    "vue-router": "^3.4.9",
    "vuex": "^3.5.1"
  }
}

Login.vue

<template>
  <div class="flex flex-col pt-8 dark:bg-dark-background">
    <div class="flex flex-col bg-backgroundDark py-8 px-2 items-center dark:bg-dark-background-light">
      <h2 class="flex w-max font-raleway text-2xl font-extrabold dark:text-dark-text-primary">You're currently Logged Out</h2>
      <p class="flex mt-3 text-lg font-light text-center dark:text-dark-text-primary">The page you are trying to access is available for registered customers only. Please login to proceed.</p>
      <button id="loginButton" class="mt-5 bg-primary rounded ring-primary" type="button">Login</button>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        loading: false,
      }
    },
    methods: {

    }
  }
</script>
Questioner
Zh4rsiest
Viewed
0
Zh4rsiest 2020-11-29 19:58:10

问题是我必须package.json npm脚本中设置NODE_ENV = production变量

"scripts": {
    ...
    "build": "NODE_ENV=production webpack --mode=production --progress"
},