为什么在构建 webpack.mix.js 时我的.css 文件不会出现在公共目录中？

Question

我在.scss文件中定义了我的webpack.mix.js文件。 但是，每当我编译时， .css文件都不会出现在我的公共目录中。 我检查了文件的拼写和文件路径三倍，所以这不是问题。

这是我在部署到生产环境时遇到的错误：

File plus/public/css/build/partials/live/user-navigation-live.css not defined in asset manifest. (View: /usr/share/nginx/v-1-2021-05-11_10-38/resources/views/layouts/login.blade.php)

这就是它在login.blade.php中的定义方式

<link href="{{ Cdn::mix('plus/public/css/build/partials/live/user-navigation-live.css') }}" rel="stylesheet">

这是webpack.mix.js文件中的定义方式：

mix.sass('resources/assets/sass/partials/live/user-navigation-live.scss', 'public/plus/public/css/build/partials/live/');

这是我的构建方式：

npm run dev && composer dump-autoload

这个问题的原因可能是什么？

Answer 1

你的配置看起来如何？

mix.webpackConfig({
    module: {
        rules: [
            {
                test:
                    /\.scss$/,
                use: [
                    {
                        loader: 'sass-loader',
                        options: {
                            // Prefer Dart Sass
                            implementation: require('sass'),

                            // See https://github.com/webpack-contrib/sass-loader/issues/804
                            webpackImporter: false,
                            sassOptions: {
                                includePaths: ['./node_modules', './vendor/']
                            },
                        }
                    },
                ]
            }
        ]
    },
});
if (mix.inProduction()) {
    mix.version();
}

您必须添加类似上述配置才能使其正常工作。 为什么不使用asset()助手加载文件？ mix()仅在您有版本控制的文件时才有效。