we are using rollup to make the build. We've currently only had Sass, but are trying to also use css modules for some custom components. The configuration in the rollup.config.js is
postcss({
extract: false,
modules: true
}),
scss({
outputStyle: 'compressed'
}),
However on running the build we get an error saying 'default' is not exported by the css module file. The Css module file is foo.module.css and only defines the css classes. As its meant to be a css module, the classes should be put onto a default export, so not quite sure why rollup is complaining here.
This has worked by removing the scss configuration key and adding a key for use with value 'sass' into the postcss config key.
postcss({
extract: false,
modules: true,
use: ['sass']
}),
Related
I have a Gatsby site with sass support using the gatsby-plugin-sass plugin. That works, but now I want to add PostCSS support.
According to the warning on this page (a deprecated plugin) this now should be possible by defining the postcss plugin in the postCssPlugins options.
Indeed, the sass plugin documentation tells me I can add a postcss plugin to the options, but it's unclear to me how to do this exactly. I already added the gatsby-plugin-postcss plugin separately and am now trying to integrate it with the sass plugin.
This does not work:
gatsby-config.js:
// SASS support with PostCSS support:
`gatsby-plugin-postcss`,
{
resolve: `gatsby-plugin-sass`,
options: {
postCssPlugins: ['gatsby-plugin-postcss'],
},
},
I guess I should call it in a different way but I can't find any documentation on this?
gatsby-plugin-postcss use specific postcss plugin(postcss-preset-env, for example) to handle css code, itself is not a postcss plugin, so you can't use it in postCssPlugins option.
And the pipeline for gastby to handle sass file is sass -> postcss plugin -> final result, so just use sass plugin and choose postcss in its option postCssPlugins.
{
resolve: `gatsby-plugin-sass`,
options: {
postCssPlugins: [
require(`postcss-preset-env`)({
stage: 2,
features: {
"nesting-rules": true,
},
}),
],
precision: 6,
},
},
I am integrating Material UI into a Svelte project.
I follow everything from the documentation, but I get this error when running my project:
!] (plugin postcss) Error: File to import not found or unreadable: smui-theme.
node_modules/#smui/tab/_index.scss
Error: File to import not found or unreadable: smui-theme.
What can be the problem?
The error means that you must have a file called _smui-theme.scss in order to be able to compile Sass.
First make sure you have the file _smui-theme.scss in your project under theme directory.
(I usually put it in src/theme/_smui-theme.scss)
Then you have to add it in the postcss config of your rollup plugin like this:
import postcss from 'rollup-plugin-postcss';
export default {
...
plugins: [
svelte({
...
}),
....
postcss({
extract: true,
minimize: true,
use: [
['sass', {
includePaths: [
'./src/theme', <<< ------------ HERE
'./node_modules'
]
}]
]
}),
...
};
Make sure the theme directory is well included in the postcss plugin config like shown before.
Note: if the path is not right, you may receive the same error!
I am loading my utilities and assets in base.scss like so
#import "_variables";
#import "_mixins";
...
I have tons of modules in my application and we are doing so many changes in these modules.
so importing the base.scss in the header of each of the scss files is causing so much trouble and seems very redundant.
I tried using sass's includePaths but it didn't help as it only resolves the #import declarations.
Is there any way that I can auto import my utilities without having to #import it manually in each file?
This loader will do the job
https://github.com/shakacode/sass-resources-loader
by adding this to your webpack config
sassResources: [ './path/to/vars.scss', './path/to/mixins.scss' ]
Update
check the implementation out in action in this boilerplate
In Webpack 5, this is how I did it:
{
loader: 'sass-loader',
options: {
sourceMap: true,
additionalData: `#import "${__dirname}/src/int/css/_mixins.scss";`
},
Simply add the path to your e.g. SCSS Mixin or variable file to "additionalData".
I’m building an app with angular 2, sass and webpack and I’m having troubles with url on sass files that are required inside each component (using require); it doesn’t take those files and copy it to assets folder and don’t modify the url to the builded css styles.
It work's correctly when I use import and with the assets inside html component's.
loaders:
...{
test: /\.html$/,
loader: 'html'
},
{
test: /\.(png|jpe?g|gif)$/,
loader: 'file?name=assets/[name].[hash].[ext]'
},
{
test: /\.scss/,
exclude: helpers.root('src', 'app'),
loader: ExtractTextPlugin.extract('style', 'css?sourceMap!sass?sourceMap')
},
{
test: /\.scss$/,
include: helpers.root('src', 'app'),
loaders: ['raw', 'resolve-url', 'sass?sourceMap']
}...
Require styles:
...
styles: [require('./hero-image.scss')]
template: require('./hero-image.component.html')
...
Sass
...
background: url('../../../public/img/hero-bg.jpg');
...
Here the loaders (when build) should copy hero-bg.jpg to /assets/ and in the builded css the background should be /assets/hero-bg.jpg but it doesn't copy the image to assets folders and css builded remains like the sass.
NOTE: When I use import instead of require (modifying the loaders rules of course) at this point it works correctly.
Inside the html component (hero-image.component.html) I have this <img src="../../../public/img/btn-google-play.jpg" /> and it work's correctly too.
I try with this angular 2 starter pack and the issue also happens.
Thanks for helping, I really appreciate it.
Edit: I forgot to mention that this also happens using only css (without sass) and following the official angular documentation about webpack
After a lot of research and many attempts I found an approach using the exports-loader that work's and can be easily updated.
{
test: /\.scss$/,
include: helpers.root('src', 'app'),
loaders: ['exports-loader?module.exports.toString()', 'css', 'sass']
}
Thanks #BobSponge for your help, you guided me in the right direction.
Looks like incorrect config example in Angular docs.
Neither of this loaders process url() in css and publish assets to destination folder: 'raw', 'resolve-url', 'sass'.
Despite the name, resolve-url loader just replacing relative urls to suitable for css-loader.
So, you should add css-loader to the last scss loader's config:
{
test: /\.scss$/,
include: helpers.root('src', 'app'),
loaders: ['css', 'resolve-url', 'sass?sourceMap']
}
Styles require will changed to:
styles: [require('./hero-image.scss').toString()]
From docs:
#import and url(...) [in css files] are interpreted like require() and will be resolved by the css-loader.
An alternative to exports-loader?module.exports.toString() is to use the to-string-loader mentioned in the css-loader readme
The angular generator has a dependency on compass and thus ruby when using SASS.
Two questions:
Is it possible/practical to remove the ruby dependency by using something like node-sass?
If so, how do I accomplish #1 and still use angular generator to generate controllers, routes, services, etc in the future?
If you are using the Yeoman Angular generator and you wish to use SASS/SCSS without depending on Ruby, you could use the grunt-sass Grunt module.
Yeoman is essentially a project set-up with Grunt so you can just add whichever Grunt modules you need. If you are unfamiliar with Grunt, you can read the documentation here.
Essentially, you can set up the Grunt configuration for your SASS task, then register the task in your generated project's Gruntfile.js:
grunt.initConfig({
sass: {
options: {
sourceMap: true
},
dist: {
files: {
'main.css': 'main.scss'
}
}
}
});
grunt.registerTask('default', ['sass']);
You should note that this Grunt module uses Node SASS for CSS compilation instead of Compass, so you may be missing out on some Compass mixins you may be used to.