Comments (6)
Hi @djmtype
I've toyed with moving to straight sass or creating another version of this starter w/out tailwind and postcss and instead include a barebones sass setup. I haven't just yet as tailwind has been a perfect fit for pretty much every project we start as of late. If I was to look into it, I would see about using the node-sass-promise
package (updated below)
from eleventy-starter.
Looks like a bit of googling and I found a solution https://dev.to/adamkdean/simple-scss-with-11ty-kmn
from eleventy-starter.
@djmtype Here's what I came up with somewhat quickly (probably requires a bit more real world testing):
const path = require('path')
const sass = require('node-sass-promise')
const postcss = require('postcss')
const cssnano = require('cssnano')
const purgecss = require('@fullhuman/postcss-purgecss')({
// content relative to /dist
content: [
'./src/assets/js/**/*.js',
'./src/**/*.njk',
'./src/**/*.md',
'./src/**/*.html',
],
// This is the function used to extract class names from your templates
defaultExtractor: (content) => {
// Capture as liberally as possible, including things like `h-(screen-1.5)`
const broadMatches = content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || []
// Capture classes within other delimiters like .block(class="w-1/2") in Pug
const innerMatches = content.match(/[^<>"'`\s.()]*[^<>"'`\s.():]/g) || []
return broadMatches.concat(innerMatches)
},
})
const fileName = 'main.scss'
const permalink = 'assets/main.css'
module.exports = class {
async data() {
const rawFilepath = path.join(__dirname, fileName)
return {
permalink,
rawFilepath,
eleventyExcludeFromCollections: true,
}
}
async render({ rawFilepath }) {
const { css } = await sass.render({
file: rawFilepath,
includePaths: ['node_modules'],
sourceMapContents: process.env.ELEVENTY_ENV !== 'production', // don't ship sourcemap contents in production
sourceMapEmbed: true,
sourceMapRoot: fileName,
})
return await postcss([
require('autoprefixer'),
...(process.env.ELEVENTY_ENV === 'production' ? [purgecss, cssnano] : []),
])
.process(css.toString(), { from: permalink })
.then((result) => result.css)
}
}
from eleventy-starter.
Wow, thanks very much @ryanscherler. It's working without css source map. I thought just by looking at the docs and Adam Dean's example, I could figure that out. However, not the case. There's no error, so I'm either very wrong to assume the outFile
path property, or something else.
const outputFile = path.join(__dirname, permalink)
const { css } = await sass.render({
file: rawFilepath,
outFile: outputFile,
sourceMap: true,
includePaths: [path.resolve(path.join(__dirname, 'node_modules'))],
})
from eleventy-starter.
@djmtype Sourcemaps are not automatically written to the filesystem (See: https://github.com/sass/node-sass#outfile). You would need to write this yourself OR you can embed the source map into the CSS via something like:
const { css } = await sass.render({
file: rawFilepath,
includePaths: ['node_modules'],
sourceMapContents: process.env.ELEVENTY_ENV !== 'production', // don't ship sourcemap contents in production
sourceMapEmbed: true,
sourceMapRoot: fileName,
})
from eleventy-starter.
@ryanscherler thanks. That's exactly what I ended up doing.
from eleventy-starter.
Related Issues (8)
- Fix dependencies definitions HOT 1
- Suggestion: Include a link to a demo showing this template HOT 2
- Image rendering via picture.js doesn't work HOT 1
- Remove npx from parcel and 11ty scripts HOT 1
- [Suggestion] Updating PostCSS config HOT 3
- Add script to clean build before start and build HOT 2
- Missing 404.md causes Browsersync error HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from eleventy-starter.