У меня реализовано такое через webpack.
В webpack.config.js
const css = {
name: 'css',
mode: "production",
entry: {
global: './resources/css/global.js',
},
output: {
path: path.resolve(__dirname, 'public/assets'),
filename: '[name].[contenthash].js',
},
module: {
rules: [
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
'sass-loader'
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css'
}),
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: "resources/css/template_inline_css.ejs",
filename: path.resolve(__dirname, 'resources/views/inline/css.blade.php'),
inject: false,
publicPath: '/assets',
}),
],
}
В template_inline_css.ejs
<% let styles = htmlWebpackPlugin.files.css; %>
<% for (let style of styles) { %>
@push('<%= style.replace(/\/.+\/(.+?)\..+/, '$1') %>_css')
<style><%= compilation.assets[style.substr(htmlWebpackPlugin.files.publicPath.length)].source() %></style>
@endpush
<% } %>
Затем можно подключить это в любом blade шаблоне
@include('inline.css')
@stack('global_css')
Краткая суть работы такая:
webpack скачала преобразует css код, потом MiniCssExtractPlugin его извлекает, затем HtmlWebpackPlugin его вставляет туда, куда ему сказано в переданных параметрах и по заданному шаблону ejs.
При желании подключение в blade через push можно убрать в шаблоне template_inline_css.ejs. Я это для себя делал, так как нужна была универсальность, чтобы можно было сделать несколько точек входа.
Как итог: все работает автоматически, хоть и сложно устроено.
