文章/答案/技术大牛

发布

社区首页 >问答首页 >postCss不使用laravel-mix，scss和尾风

问postCss不使用laravel-mix，scss和尾风
EN

Stack Overflow用户

提问于 2020-04-18 14:23:40

回答 1查看 5.7K关注 0票数 4

我很难用tailwindcss和postCss来优化laravel-mix和Scss。生成正确css的npm run dev。但是，对于生产构建，npm run prod并不导出我在HTML模板中使用过的类。

package.json

{
  "name": "school",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  },
  "devDependencies": {
    "tailwindcss": "^1.2.0",
    "cross-env": "^7.0.2",
    "laravel-mix": "^5.0.4",
    "laravel-mix-purgecss": "^5.0.0-rc.1",
    "sass": "^1.26.3",
    "sass-loader": "^8.0.2",
    "vue-template-compiler": "^2.6.11"
  }
}

laravel-mix.js

const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');
require('laravel-mix-purgecss');


mix.js('src/js/app.js', 'public/js')
    .sass('src/sass/app.scss', 'public/css')
    .options({
        processCssUrls: false,
        postCss: [tailwindcss('./tailwind.config.js')],
    })
    .purgeCss();

src/app.scss

我已经尝试过没有purgecss ignore，这也没有任何区别。

/* purgecss start ignore */
@tailwind  base;
@tailwind  components;
/* purgecss end ignore */
@tailwind  utilities;
//@tailwind screens;

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="public/css/app.css">
    <script src="public/js/app.js"></script>
</head>
<body class="bg-teal-400">

<div class="container">
    <h1 class="text-6xl text-orange-500">Hello</h1>
</div>

</body>
</html>

请查看整个源代码的这个储存库。

问题： 如何使用taliwindcss优化scss、laravel-mix和postCss Non /Non项目？

tailwind-css

npm

laravel-mix

postcss

回答 1

Stack Overflow用户

发布于 2021-01-11 01:57:14

您可以将PostCSS插件传递到sass方法中，如下面的代码示例所示。

// webpack.mix.js
let mix = require('laravel-mix');

mix
  .sass('assets/scss/app.scss', 'dist', {}, [
    require("tailwindcss"),
  ])
  .setPublicPath('web')
;

票数 8

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/61290702

复制

相似问题

问postCss不使用laravel-mix，scss和尾风
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问postCss不使用laravel-mix，scss和尾风EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问postCss不使用laravel-mix，scss和尾风
EN