在构建 webpack.mix.js
时,.css
文件不会出现在公共目录中,可能是由于以下几个原因:
Webpack 是一个模块打包工具,它可以将多个模块(如 JavaScript、CSS、图片等)打包成一个或多个文件。Laravel Mix 是基于 Webpack 的前端构建工具,专门为 Laravel 框架设计。
webpack.mix.js
:webpack.mix.js
文件中正确配置了 CSS 处理。css-loader
和 style-loader
或 mini-css-extract-plugin
来处理 CSS 文件。以下是一个基本的 webpack.mix.js
配置示例,确保你的配置与此类似:
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.styles('resources/css/app.css', 'public/css/app.css');
如果你使用的是 style-loader
和 css-loader
,确保你已经安装了它们:
npm install style-loader css-loader --save-dev
如果你使用的是 mini-css-extract-plugin
来提取 CSS 文件,确保你已经安装了它:
npm install mini-css-extract-plugin --save-dev
然后在 webpack.mix.js
中配置它:
const mix = require('laravel-mix');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'webpack.mix.js')
.options({
postCss: [
require('tailwindcss'),
],
})
.webpackConfig({
plugins: [
new MiniCssExtractPlugin({
filename: 'css/app.css',
}),
],
});
这种配置适用于大多数 Laravel 项目,特别是当你需要将 CSS 文件从 resources/css
目录打包到 public/css
目录时。
通过以上步骤,你应该能够解决 .css
文件不会出现在公共目录中的问题。如果问题仍然存在,请检查控制台输出的错误信息,以便进一步诊断问题。
领取专属 10元无门槛券
手把手带您无忧上云