TailwindCSS 3 和 Parcel 2 - 构建顺风问题
TailwindCSS3 & Parcel2 - Issue getting tailwind to build
我通过以下配置直接通过 API 使用 Parcel:
import { Parcel } from '@parcel/core';
export default new Parcel({
entries: 'src/index.html',
defaultConfig: '@parcel/config-default'
});
我正在使用 postcss.config.mjs 和 tailwind.config.mjs 来初始化 Tailwind,如下所示
// postcss.config.mjs
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {}
}
}
// tailwind.config.mjs
module.exports = {
content: ['./src/**/*.{html,js}'],
theme: {
extend: {}
},
plugins: [],
mode: 'jit'
};
...并通过导入到 index.html;
中的 index.css 文件将 tailwind 导入到我的项目中
@tailwind base;
@tailwind components;
@tailwind utilities;
<!doctype html>
<html>
<head>
<link href="./index.css" type="text/css" rel="stylesheet">
</head>
<body class='bg-black'>
<script type='module' src='./index.js'></script>
</body>
</html>
最后是我的 package.json(我将项目定义为模块)
{
"type": "module",
"name": "app",
"source": "./src/index.html",
"dependencies": {
"autoprefixer": "10",
"parcel": "2",
"postcss": "8",
"tailwindcss": "3"
},
"alias": { "src": "./src" },
}
但出于某种原因,这无法正确构建,而且我的网页没有样式。
我设法让它像这样工作:
将postcss.config.mjs改为.postcssrc
// .postcssrc
{
"plugins": {
tailwindcss: {},
autoprefixer: {}
}
}
将tailwind.config.mjs改为tailwind.config.cjs
// tailwind.config.cjs
module.exports = {
content: [
"./src/**/*.{html,js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
您这样使用包裹:节点build.mjs
// build.mjs
import {Parcel} from '@parcel/core';
let bundler = new Parcel({
entries: 'src/index.html',
defaultConfig: '@parcel/config-default',
serveOptions: {
port: 3000
},
hmrOptions: {
port: 3000
}
});
await bundler.watch();
试一试,看看它是否也适合你。
我通过以下配置直接通过 API 使用 Parcel:
import { Parcel } from '@parcel/core';
export default new Parcel({
entries: 'src/index.html',
defaultConfig: '@parcel/config-default'
});
我正在使用 postcss.config.mjs 和 tailwind.config.mjs 来初始化 Tailwind,如下所示
// postcss.config.mjs
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {}
}
}
// tailwind.config.mjs
module.exports = {
content: ['./src/**/*.{html,js}'],
theme: {
extend: {}
},
plugins: [],
mode: 'jit'
};
...并通过导入到 index.html;
中的 index.css 文件将 tailwind 导入到我的项目中@tailwind base;
@tailwind components;
@tailwind utilities;
<!doctype html>
<html>
<head>
<link href="./index.css" type="text/css" rel="stylesheet">
</head>
<body class='bg-black'>
<script type='module' src='./index.js'></script>
</body>
</html>
最后是我的 package.json(我将项目定义为模块)
{
"type": "module",
"name": "app",
"source": "./src/index.html",
"dependencies": {
"autoprefixer": "10",
"parcel": "2",
"postcss": "8",
"tailwindcss": "3"
},
"alias": { "src": "./src" },
}
但出于某种原因,这无法正确构建,而且我的网页没有样式。
我设法让它像这样工作:
将postcss.config.mjs改为.postcssrc
// .postcssrc
{
"plugins": {
tailwindcss: {},
autoprefixer: {}
}
}
将tailwind.config.mjs改为tailwind.config.cjs
// tailwind.config.cjs
module.exports = {
content: [
"./src/**/*.{html,js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
您这样使用包裹:节点build.mjs
// build.mjs
import {Parcel} from '@parcel/core';
let bundler = new Parcel({
entries: 'src/index.html',
defaultConfig: '@parcel/config-default',
serveOptions: {
port: 3000
},
hmrOptions: {
port: 3000
}
});
await bundler.watch();
试一试,看看它是否也适合你。