我正在设置一个基本的 Webpack 安装，并希望使用PostCSS和PreCSS插件在 @imported 文件中自动重新加载浏览器预处理的 CSS 。目前，如果我修改并保存 @imported 文件，浏览器不会刷新（下面示例中的 body.css）。如果我随后保存根引用的 CSS 文件 (styles.css)，则浏览器会刷新并反映对 @imported 文件所做的任何更改。
我尝试使用可配置的 webpack-dev-server，并使用 server.js。我试过没有和安装热模型重新加载（HMR）。
有没有办法让 webpack 监视 @imported CSS 文件，或者我在这里根本错过了什么？
包.json
"dependencies": {
"react": "^0.14.0",
"react-dom": "^0.14.0"
},
"devDependencies": {
"autoprefixer": "^6.3.1",
"css-loader": "^0.23.1",
"extract-text-webpack-plugin": "^1.0.1",
"postcss-loader": "^0.8.0",
"postcss-scss": "^0.1.3",
"precss": "^1.4.0",
"react-hot-loader": "^1.3.0",
"style-loader": "^0.13.0",
"webpack": "^1.12.13",
"webpack-dev-server": "^1.14.1"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node server.js",
"start-dev-server": "webpack-dev-server 'webpack-dev-server/client?/' --host 0.0.0.0 --port 9090 …我正在尝试让 webpack 将我的 CSS 文件（使用 PostCSS）编译为单独的文件。从文档来看，这似乎正是 ExtractTextPlugin 应该做的。但是，我无法让 webpack 对我的 CSS 文件执行任何操作。
\n\n相关项目结构：
\n\ndist\n \xe2\x8e\xa3js\n \xe2\x8e\xa3bundle.js\npublic\n \xe2\x8e\xa3css\n \xe2\x8e\xa3style.css*\nsrc\n \xe2\x8e\xa3css\n \xe2\x8e\xa3index.css\n\n* file doesn\xe2\x80\x99t exist (hasn\xe2\x80\x99t been created)\nwebpack.config.babel.js
\n\nimport webpack from 'webpack';\nimport path from 'path';\n\nimport ExtractTextPlugin from 'extract-text-webpack-plugin';\n\nimport { WDS_PORT } from './src/shared/config';\nimport { isProd } from './src/shared/util';\n\nexport default {\n entry: [\n 'react-hot-loader/patch',\n './src/client',\n ],\n output: {\n filename: 'js/bundle.js',\n path: path.resolve(__dirname, 'dist'),\n publicPath: isProd ? '/static/' : `http://localhost:${ WDS_PORT }/dist/`,\n },\n module: {\n rules: [\n { test: …我无法优化tailwindcss与postCss使用laravel-mix和Scss。该npm run dev生成正确的CSS。但是，生产构建npm run prod不会导出我在HTML模板中使用的类。
{
"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": …我正在尝试将 Tailwind 合并到我的 React 应用程序中。所以我按照此处概述的步骤进行操作https://daveceddia.com/tailwind-create-react-app/
当我启动我的应用程序（新创建的演示应用程序）时，它会加载一个空白屏幕。刷新页面后，一切正常。我很困惑为什么初始屏幕是空白页。任何帮助或解释将不胜感激。
现在，如果我在不观看的情况下构建 tailwindcss，那么 React 应用程序会加载正确的 css，但是热重载不适用于 tailwindcss，而且我不会观看它的更改，因此生成的 css 不会更改。
如果我使用 npm-run-all 运行 React 应用程序和 postcss watch 脚本，我最初会看到空白屏幕，如上所述。
如果我使用 npm-run-all 运行 React 应用程序和 postcss watch scrip 并且不包含 tailwind. generated.css 文件，我的 React 应用程序可以正常运行和加载，但我不再有 tailwind css 了。
似乎只有当我包含顺风实用程序时它才会这样做
@tailwind utilities;
我的 Angular 10.2.1 应用程序使用自定义 webpack 构建器在 .scss 文件中提供 PostCSS 支持，在 SPA 模式下工作得非常好。
\n角度.json
\n "build": {\n "builder": "@angular-builders/custom-webpack:browser",\n "options": {\n "customWebpackConfig": {\n "path": "./webpack.config.js"\n },\nwebpack.config.js
\nlet plugins = [\n require(\'postcss-import\'),\n require(\'tailwindcss\'),\n require(\'autoprefixer\'),\n]\n\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.scss$/,\n loader: \'postcss-loader\',\n options: {\n ident: \'postcss\',\n syntax: \'postcss-scss\',\n plugins: () => plugins\n }\n }\n ]\n }\n};\n我决定按照官方文档添加 SSR 支持ng add @nguniversal/express-engine，但是当我尝试提供 SSR 版本时，出现错误：
ERROR in Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js):\nSassError: expected …使用以下配置，一切都工作正常npm run dev，但是当我们这样做时npm run build，出现了错误：
./assets/scss/main.scss 中的错误（./node_modules/@nuxt/postcss8/node_modules/css-loader/dist/cjs.js？ref--7-oneOf-1-1！./node_modules/@ nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js??ref--7-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--7-oneOf- 1-3！./assets/scss/main.scss）模块构建失败（来自./node_modules/@nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js）：ParserError：第1行语法错误，第23栏
nuxt.config.js
export default {
// Global page headers: https://go.nuxtjs.dev/config-head
head: {
title: 'app-name',
htmlAttrs: {
lang: 'en'
},
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
{ rel: 'stylesheet', type: 'text/css', href: 'https://unpkg.com/open-sans-all/css/open-sans.min.css' },
]
},
// Global CSS: https://go.nuxtjs.dev/config-css
css: [
'@/assets/scss/main.scss', …我正在尝试将 PostCSS 插件 autoprefixer 与 grunt 一起使用。我已经阅读了许多相关的文章和 Stackoverflow 答案，但我仍然收到“警告：[object Object] 不是 PostCSS 插件，请使用 --force 继续”。
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
dist: {
files: {
'css/style.css' : 'scss/style.scss'
}
}
},
watch: {
css: {
files: '**/*.scss',
tasks: ['sass']
}
},
postcss: {
options: {
map: true,
processors: [
require('autoprefixer')()
]
},
dist: {
src: 'css/*.css'
}
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-postcss');
grunt.registerTask('dev',['sass','watch']);
grunt.registerTask('build',['sass', 'postcss']);
}
package.json
"devDependencies": {
"grunt": "^1.4.0",
"grunt-contrib-sass": "^2.0.0",
"grunt-contrib-watch": "^1.1.0",
"grunt-postcss": "^0.9.0",
"postcss": "^8.3.0",
"autoprefixer": "^10.2.6" …我正在启动一个新的 Next.js 项目，该项目具有现有的情感.js 样式，现在我正在尝试通过此指令添加 tailwind https://tailwindcss.com/docs/guides/nextjs
这是我的 postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
和 tailwind.config.js
module.exports = {
purge: [
'./pages/**/*.js',
'./components/**/*.js',
'./lib/**/*/js'
],
darkMode: 'class', // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: []
}
和 next.config.js
module.exports = {
images: {
domains: [
'user-images.githubusercontent.com'
]
},
typescript: {
ignoreBuildErrors: true
},
eslint: {
ignoreDuringBuilds: true
}
}
这是我在 /styles/global.css 中使用 Tailwind 的方法
@tailwind base; …我在 symfony 6 应用程序中更新到 TailwindCSS 3。当我编译样式表时，没有错误（编译成功），但所有顺风类样式都不起作用。我注意到 tailwind 的导入似乎不是从 @tailwindcss 调用翻译的（它们只是按原样包含在浏览器中）。也许是 postCSS 问题？
webpack.config.js:
const Encore = require('@symfony/webpack-encore');
const path = require('path');
// Manually configure the runtime environment if not already configured yet by the "encore" command.
// It's useful when you use tools that rely on webpack.config.js file.
if (!Encore.isRuntimeEnvironmentConfigured()) {
Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}
Encore
// directory where compiled assets will be stored
.setOutputPath('public/build/')
// public path used by the web server to access the output path
.setPublicPath('/build') …您好，我使用创建了反应应用程序npm create vite，并尝试集成，autoprefixer但它不起作用。
vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import autoprefixer from 'autoprefixer';
export default defineConfig({
plugins: [react()],
css: {
postcss: {
plugins: [autoprefixer()],
},
},
});
package.json
"devDependencies": {
"@types/react": "^18.0.17",
"@types/react-dom": "^18.0.6",
"@vitejs/plugin-react": "^2.1.0",
"autoprefixer": "^10.4.8",
"postcss": "^8.4.16",
"sass": "^1.54.9",
"vite": "^3.1.0"
},
"browserslist": [ "last 2 versions", "not dead" ]
我尝试创建一个postcss.config.js，但它也不起作用。
postcss.config.js
import autoprefixer from 'autoprefixer';
export const plugins = {
plugins: [autoprefixer()],
};
如果有人能帮助我那就太好了！
postcss ×10
tailwind-css ×6
webpack ×4
autoprefixer ×2
reactjs ×2
angular ×1
buefy ×1
bulma ×1
css ×1
emotion-js ×1
export ×1
gruntjs ×1
laravel-mix ×1
next.js ×1
npm ×1
nuxt.js ×1
reload ×1
symfony ×1
vite ×1
webpack-2 ×1
webpack-hmr ×1