Благодаря помощи этого комментария GitHub у меня все работает.
Загрузчики по умолчанию можно удалить с помощью environment.loaders.delete('sass') // same for 'moduleSass', 'moduleCss', 'css'.
Затем, они могут быть заменены новыми. Я разделил загрузчики s css и sass на их собственные файлы:
// config/webpack/loaders/sass.js
const { config } = require('@rails/webpacker');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
test: /\.sass$/,
use: [
config.extract_css === false
? 'vue-style-loader'
: MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
sourceMap: true,
importLoaders: 2,
},
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
implementation: require('sass'),
fiber: require('fibers'),
data: '@import "app/frontend/src/assets/styles/variables.scss"',
},
},
],
};
// config/webpack/loaders/scss.js
const { config } = require('@rails/webpacker');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
test: /\.scss$/,
use: [
config.extract_css === false
? 'vue-style-loader'
: MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
sourceMap: true,
importLoaders: 2,
},
},
{
loader: 'postcss-loader',
options: {
sourceMap: true,
},
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
implementation: require('sass'),
fiber: require('fibers'),
data: '@import "app/frontend/src/assets/styles/variables.scss";',
},
},
],
};
Они повторно реализуют интеграцию basi c webpacker с извлечением CSS.
Затем Я добавляю их в основную конфигурацию следующим образом:
// config/webpack/environment.js
const { environment } = require('@rails/webpacker');
const path = require('path');
// Plugins
const { VueLoaderPlugin } = require('vue-loader');
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');
// Loaders
const erb = require('./loaders/erb');
const sass = require('./loaders/sass');
const scss = require('./loaders/scss');
const vue = require('./loaders/vue');
const yml = require('./loaders/yml');
// Remove webpacker's conflicting loaders
environment.loaders.delete('moduleSass');
environment.loaders.delete('moduleCss');
environment.loaders.delete('sass');
// Modify base css loader to support vue SFC style tags
environment.loaders.get('css').use.find((el) => el.loader === 'style-loader').loader = 'vue-style-loader';
// Apply plugins
environment.plugins.prepend('VuetifyLoaderPlugin', new VuetifyLoaderPlugin());
environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin());
// Apply custom loaders
environment.loaders.append('erb', erb);
environment.loaders.append('yml', yml);
environment.loaders.append('vue', vue);
environment.loaders.append('sass', sass);
environment.loaders.append('scss', scss);
// Shorthands for import statements
environment.config.resolve.alias = {
// Use the same vue package everywhere
vue: 'vue/dist/vue.esm',
// use '@' as absolute path from /src
'@': path.resolve(__dirname, '../../app/frontend/src/'),
};
module.exports = environment;
Здесь также важна одна часть, где я все еще изменяю css -loader по умолчанию, чтобы использовать 'vue -style-loader' над "стиль-погрузчик. Но для более крупных изменений (например, vuetify) я могу определить свои собственные определенные загрузчики для синтаксиса SASS / S CSS.
Возможно, его можно оптимизировать и дальше, чтобы удалить дублирование, но пока оно только две конфигурации, я просто счастлив, что это работает:)