After a Migration to Webpack Middleman still seems to want to tackle SCSS/SASS files:
Error: File to import not found or unreadable: ~foundation-sites/scss/util/util.
on line 63:1 of source/content/_foundation.settings.scss
from line 8:1 of source/content/only_form.css.sass
>> @import '~foundation-sites/scss/util/util';
^
source/content/_foundation.settings.scss:63
/sassc-2.4.0/lib/sassc/engine.rb:50:in `render'
/middleman-core-4.5.1/lib/middleman-core/renderers/sass.rb:55:in `evaluate'
/tilt-2.0.11/lib/tilt/template.rb:109:in `render'
/middleman-core-4.5.1/lib/middleman-core/file_renderer.rb:79:in `render'
/middleman-core-4.5.1/lib/middleman-core/template_renderer.rb:184:in `_render_with_all_renderers'
/middleman-core-4.5.1/lib/middleman-core/template_renderer.rb:147:in `block in render'
/activesupport-7.0.8.1/lib/active_support/notifications.rb:208:in `instrument'
/middleman-core-4.5.1/lib/middleman-core/util.rb:20:in `instrument'
/middleman-core-4.5.1/lib/middleman-core/template_renderer.rb:146:in `render'
/middleman-core-4.5.1/lib/middleman-core/sitemap/resource.rb:154:in `render'
/middleman-core-4.5.1/lib/middleman-core/rack.rb:113:in `process_request'
/middleman-core-4.5.1/lib/middleman-core/rack.rb:67:in `block in call'
/middleman-core-4.5.1/lib/middleman-core/rack.rb:66:in `catch'
/middleman-core-4.5.1/lib/middleman-core/rack.rb:66:in `call'
/rack-2.2.8.1/lib/rack/urlmap.rb:74:in `block in call'
/rack-2.2.8.1/lib/rack/urlmap.rb:58:in `each'
/rack-2.2.8.1/lib/rack/urlmap.rb:58:in `call'
/rack-2.2.8.1/lib/rack/head.rb:12:in `call'
/rack-2.2.8.1/lib/rack/lint.rb:50:in `_call'
/rack-2.2.8.1/lib/rack/lint.rb:38:in `call'
/rack-2.2.8.1/lib/rack/builder.rb:244:in `call'
/rack-2.2.8.1/lib/rack/mock.rb:84:in `request'
/rack-2.2.8.1/lib/rack/mock.rb:57:in `get'
/middleman-core-4.5.1/lib/middleman-core/builder.rb:233:in `block in output_resource'
/activesupport-7.0.8.1/lib/active_support/notifications.rb:208:in `instrument'
/middleman-core-4.5.1/lib/middleman-core/util.rb:20:in `instrument'
/middleman-core-4.5.1/lib/middleman-core/builder.rb:226:in `output_resource'
/parallel-1.24.0/lib/parallel.rb:627:in `call_with_index'
/parallel-1.24.0/lib/parallel.rb:597:in `process_incoming_jobs'
/parallel-1.24.0/lib/parallel.rb:577:in `block in worker'
/parallel-1.24.0/lib/parallel.rb:568:in `fork'
/parallel-1.24.0/lib/parallel.rb:568:in `worker'
/parallel-1.24.0/lib/parallel.rb:559:in `block in create_workers'
/parallel-1.24.0/lib/parallel.rb:558:in `each'
/parallel-1.24.0/lib/parallel.rb:558:in `each_with_index'
/parallel-1.24.0/lib/parallel.rb:558:in `create_workers'
/parallel-1.24.0/lib/parallel.rb:497:in `work_in_processes'
/parallel-1.24.0/lib/parallel.rb:291:in `map'
/middleman-core-4.5.1/lib/middleman-core/builder.rb:138:in `output_resources'
/middleman-core-4.5.1/lib/middleman-core/builder.rb:98:in `block in prerender_css'
/activesupport-7.0.8.1/lib/active_support/notifications.rb:208:in `instrument'
/middleman-core-4.5.1/lib/middleman-core/util.rb:20:in `instrument'
/middleman-core-4.5.1/lib/middleman-core/builder.rb:96:in `prerender_css'
/middleman-core-4.5.1/lib/middleman-core/builder.rb:66:in `block in run!'
/activesupport-7.0.8.1/lib/active_support/notifications.rb:208:in `instrument'
/middleman-core-4.5.1/lib/middleman-core/util.rb:20:in `instrument'
/middleman-core-4.5.1/lib/middleman-core/builder.rb:65:in `run!'
/middleman-cli-4.5.1/lib/middleman-cli/build.rb:84:in `block in build'
/activesupport-7.0.8.1/lib/active_support/notifications.rb:208:in `instrument'
/middleman-core-4.5.1/lib/middleman-core/util.rb:20:in `instrument'
/middleman-cli-4.5.1/lib/middleman-cli/build.rb:83:in `build'
/thor-1.2.2/lib/thor/command.rb:27:in `run'
/thor-1.2.2/lib/thor/invocation.rb:127:in `invoke_command'
/thor-1.2.2/lib/thor/invocation.rb:134:in `block in invoke_all'
/thor-1.2.2/lib/thor/invocation.rb:134:in `each'
/thor-1.2.2/lib/thor/invocation.rb:134:in `map'
/thor-1.2.2/lib/thor/invocation.rb:134:in `invoke_all'
/thor-1.2.2/lib/thor/group.rb:232:in `dispatch'
/thor-1.2.2/lib/thor/invocation.rb:116:in `invoke'
/thor-1.2.2/lib/thor.rb:40:in `block in register'
/thor-1.2.2/lib/thor/command.rb:27:in `run'
/thor-1.2.2/lib/thor/invocation.rb:127:in `invoke_command'
/thor-1.2.2/lib/thor.rb:392:in `dispatch'
/thor-1.2.2/lib/thor/base.rb:485:in `start'
/middleman-cli-4.5.1/bin/middleman:70:in `<top (required)>'
This is how the config.rb looks like. I can’t find any reference to SASS/SCSS:
# -*- encoding : utf-8 -*-
require 'middleman-livereload/reactor'
require_relative './helpers/base'
I18n.enforce_available_locales = true
# Webpack
activate :external_pipeline,
name: :webpack,
command: build? ? 'npm run build' : 'npm run start',
source: '.tmp/dist',
latency: 1
config[:css_dir] = ".tmp/dist"
config[:js_dir] = ".tmp/dist"
after_build do
`htmlbeautifier build/*.html`
end
# Reload the browser automatically whenever files change
activate :livereload
# Methods defined in the helpers block are available in templates
$new_rand = Random.new(1234)
Kernel.class_eval do
def rand(*args)
$new_rand.rand(*args)
end
end
set :images_dir, 'content/images'
config[:css_dir] = ".tmp/dist"
config[:js_dir] = ".tmp/dist"
And if I set
ignore '*.sass'
ignore '*.scss'
to the Middleman config, the build won’t complain any more with middleman build but it deletes the files that Webpack generated before:
I have no idea how to disable the internal SASS/SCSS handling:
set :sass, nil
in config.rb didn’t work and
%w[sass scss].each { |ext| Tilt.default_mapping.template_map.delete(ext) }
doesn’t seem to work either.
This is how the webpack config looks like:
const globImporter = require('node-sass-glob-importer');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const webpack = require('webpack');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const path = require('path');
module.exports = function (env, argv) {
const mode = argv.mode || 'development';
return {
mode: mode,
devtool: mode === 'development' ? 'source-map' : false,
entry: {
application: './source/scripts/application.js.coffee',
only_form: './source/scripts/only_form.js.coffee',
productfinder: './source/scripts/productfinder.js.coffee',
product_filter: './source/scripts/product_filter.js.coffee',
modernizr: './source/scripts/modernizr-3.6.0.js',
jquery: './source/scripts/jquery-3.7.1.js',
sticky: './source/scripts/sticky.min.js',
fontdetect: './source/scripts/fontdetect.js',
plugins: './source/scripts/plugins.js',
waypoints: './source/scripts/waypoints.min.js',
counterup: './source/scripts/jquery.counterup.min.js',
application_css: './source/content/application.css.sass',
only_form_css: './source/content/only_form.css.sass',
print_only_form_css: './source/content/print_only_form.css.sass',
modules_css: './source/content/modules.css.sass',
print_css: './source/content/print.css.sass',
},
output: {
path: path.resolve(__dirname, '.tmp/dist'),
publicPath: '/',
filename: 'scripts/[name].js',
},
module: {
rules: [
{
test: /\.coffee$/,
use: ['coffee-loader'],
},
{
test: /\.(sa|sc|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
{
loader: 'sass-loader',
options: {
sassOptions: {
importer: globImporter(),
includePaths: require('bourbon').includePaths,
},
},
},
],
},
{
test: /\.(png|jpe?g|gif|svg)$/,
type: 'asset/resource',
generator: {
filename: 'content/images/[name][ext]'
}
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
type: 'asset/resource',
generator: {
filename: 'content/fonts/[name][ext]'
}
},
],
},
plugins: [
new CopyWebpackPlugin({
patterns: [{
from: 'source/content',
to: 'content',
globOptions: {
ignore: [
'**/_remodal.css',
'**/*.eot',
'**/*.gif',
'**/*.ico',
'**/*.jpg',
'**/*.png',
'**/*.sass',
'**/*.scss',
'**/*.svg',
'**/*.ttf',
'**/*.woff',
'**/cookieconsent.css',
'**/fonts/**',
'**/ie8_only_form.css',
'**/ie8.css',
'**/images/**',
'**/modules.css',
'**/only_form.css',
'**/print_only_form.css',
'**/print.css',
'**/slick.css',
]
}
}]
}),
new MiniCssExtractPlugin({
filename: (chunkData) => ({ chunk }) => {
return `content/${chunk.name.replace('_css', '.css')}`;
},
}),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
Handlebars: 'handlebars',
Placeholders: 'placeholder',
"$.deparam": 'deparam',
}),
],
optimization: {
minimize: mode === 'production',
minimizer: [
new OptimizeCssAssetsPlugin(),
new TerserPlugin({
extractComments: false,
}),
],
},
}
};