我在优化 tailwindcss 时遇到问题与 postCss使用 laravel-mix和 Scss . npm run dev生成正确的css。但是，生产版本 npm run prod不导出我在 HTML 中使用的类模板。
包.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();
源代码/应用程序.scss
I have tried without
purgecss ignoreand that too doesn't make any difference.
/* purgecss start ignore */
@tailwind base;
@tailwind components;
/* purgecss end ignore */
@tailwind utilities;
//@tailwind screens;
索引.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>
请看 this repository对于整个源代码。
Question:
How can I optimize
taliwindcssusingscss,laravel-mixwithpostCssoutside / Non - Laravel project?
最佳答案
您可以将 PostCSS 插件传递到 sass您可以在以下代码示例中看到的方法。
// webpack.mix.js
let mix = require('laravel-mix');
mix
.sass('assets/scss/app.scss', 'dist', {}, [
require("tailwindcss"),
])
.setPublicPath('web')
;
关于npm - postCss 不适用于 laravel 外的 laravel-mix、scss 和 tailwindcss，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61290702/