I'm trying to use the Sass parts of Material design official library inside my Nuxt project.
I have created a file inside assets folder called styles.scss and tried to import a simple component like this :
#import "~#material/textfield/icon/mdc-text-field-icon";
However it's displaying me this error :
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js):
#import "#material/theme/variables";
^
File to import not found or unreadable: #material/theme/variables.
Obviously it's because there is no ~ inside the import name so Nuxt doesn't know where to find it...
Does anyone know how i can solve this ? With node-sass, i used the --include-path to solve this issue but i didn't found anything similar in nuxt...
Thanks in advance !
I found the way to solve my problem by adding the following code to nuxt.config.js :
build: {
extend(config, context) {
config.module.rules.push({
test: /\.(sass|scss)$/,
use: {
loader: "sass-loader",
options: {
includePaths: ["./node_modules"]
}
}
})
}
}
I don't know if it's the best solution but i don't need any ~ inside my scss, it automatically search inside the node_modules, which is nice.
Related
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 have the following project structure:
gatsby-config.js
/src
/components
layout.jsx
/button
button.jsx
button.scss
/pages
/styles
styles.scss
_mixins.scss
_variables.scss
and gatsby-config.js and styles.scss are configured respectively in the following way:
...
plugins: [
...,
`gatsby-plugin-sass`
]
...
#import 'variables',
'mixins';
in order to access the mixins and variables, the styles.scss is being currently imported in all the components' scss files, e.g.:
//button.scss
#import './../styles/styles.scss'
This approach is working, but the problem is, as the project grows, the styles.scss is being imported multiple times and seems to be something wrong with this approach.
Is it possible to import styles.scss only once, and make all mixins and variables available across all the components?
You are able to pass options to Sass via gatsby-plugin-sass.
The following options would globally expose the contents of ./src/styles/_styles.scss to each Sass file in the project, without the need to explicitly import it.
module.exports = {
plugins: [
{
resolve: 'gatsby-plugin-sass',
options: {
data: `#import "${__dirname}/src/styles/styles";`,
}
},
],
}
Note: The below might be obvious to some but it's worth mentioning for future readers.
Only do this with Sass files that contain just variables, mixins, functions, etc (Sass features that do not output any actual CSS until they are consumed). Otherwise you will end up with CSS that is repeated multiple times across your project.
Example repo
Providing SCSS variables globally to your components
With #use
SCSS syntax
gatsby-plugin-sass
Component-Scoped Styles with CSS Modules
gatsby-plugin-sass config
gatsby-config.js file:
{
resolve: `gatsby-plugin-sass`,
options: {
implementation: require("sass"),
data: `#use "${__dirname}/src/global-styles/variables" as var;`
}
},
var will be used as namespace.
Providing variables to your scss files
./src/global-styles/_variables.scss
./src/components/main.jsx
./src/components/main.module.scss
Info about the underscore in _variables.scss, partials.
_variables.scss file:
$color-1: red;
$color-2: blue;
main.jsx file:
import React from 'react'
import style from './main.module.scss'
const Main = () => (
<div className={style.main}>Content</div>
)
export default Main
main.module.scss file:
.main {
color: var.$color-1;
}
But I need expose some global styles in gatsby-browser.js
Well, your are going to need #use, or follow other answers that use #import in gatsby-config.js. Mixing #import and #use may not work because of:
Heads up!
A stylesheet’s #use rules must come before any rules other than #forward, including style rules. However, you can declare variables before #use rules to use when configuring modules.
https://sass-lang.com/documentation/at-rules/use
I stopped using #import, only using #use.
global-styles.scss file:
#use "./variables" as var;
body {
color: var.$color-2;
}
gatsby-browser.js file:
import './src/global-styles/global-styles.scss'
Create a file named gatsby-browser.js in the root of your directory. Import the .scss file once and it will work perfectly .
In your gatsby-browser.js
import "./src/styles/styles.scss"
As Ankit Sinha mentioned, you can import your styles in gatsby-browser.js:
import './src/styles/styles.scss';
This method is mentioned in the Gatsby tutorial.
According to the docs (see Standard Styling with Global CSS Files):
The best way to add global styles is with a shared layout component.
Your project structure suggests that you are using one (layout.jsx). If that's the case, you can also import your styles in layout.jsx:
import './../styles/styles.scss';
I cant write comments yet. I dont have the reputation. But what a complete answer from Undefined Behavior.
Just to order a little bit:
Import your global-styles.scss in gatsby-browser.js
Configure something that's going to be exposed to all scss files, in your gatsby-config.js.
It can be an #import or an #use. With #import you access directly to your variables and mixins and with #use you reference it. I don't really know what are the benfits of both, but you could use any.
I have a file named main.scs that imported a general.scss file that has at the first line this :
#import "compass/css3";
As you can see I imported compass/css3 to use some predefined mixins.
Of course all of them are in a larvel project. larvel have a built-in Mix library to compile scss and other type files.
Also I wrote these to webpack.mix.js file :
let mix = require('laravel-mix');
mix.sass('resources/assets/sass/main.scss', 'public/main/css');
But when running npm run production command I got this error:
error in ./resources/assets/sass/main.scss
Module build failed:
#import "compass/css3";
^
File to import not found or unreadable: compass/css3.
Parent style sheet: D:/wamp/www/loverspay/resources/assets/sass/_general.scss
in D:\wamp\www\loverspay\resources\assets\sass\_general.scss (line 1, column 1)
Even I installed compass in the project directory But there is still that problem
What do I do?
If you have compass library installed inside node_modules directory you can try to import it like this:
#import "~compass/css3";
If it's doesn't help you can try to modify sass includePaths config variable (laravel mix has a third option to pass additional config):
mix.sass('resources/assets/sass/main.scss', 'public/main/css', {
includePaths: [path.resolve(__dirname, './relative/path/to/compass')]
});
I'm using react-redux-starter-kit for my project. I want to know how it is possible to create a global SCSS file that when imported in _base.scss, it will affect the whole project. I've tried to #import like in the examples within the file, but nothing works. Strangely, it seems to have worked with #import './fonts/*';
I have the following structure:
styles/
----/components/
--------/Dashboard
--------/Home
--------_default.scss
----/fonts/
----_base.scss
----core.scss
And therefore, the _base.scss is like this:
#import './components/_default'
But it doesn't work. No errors are shown. I've tried also to create a theme/default.scss, just like the example in the commentary within the file, but also no effect.
In your root component just import your main scss file like you would import a module:
require('path/to/styles/_base.scss')
or:
import 'path/to/styles/_base.scss'
Just make sure that in your webpack config there is:
{
test: /\.scss$/,
loader: 'style!css!sass',
}
I am using bootstrap-sass. The node module is installed. I should expect I can, in any .scss file, use the below line to import into an appropriate sheet
#import 'bootstrap';
My understanding is what should happen is the compiler crawls up until it finds package.json, hops into node_modules, and finds the appropriate package. Instead I am getting the below error.
Error: File to import not found or unreadable: bootstrap
If I replace my import with a fully qualified path as below, then everything works gravily.
#import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap';
I am using gulp-sass to compile. Guessing I just have some minor config bits off but I can't figure out what it is.
Pass the path as an includes path....
Eg. It will look something like this if you're using gulp
.pipe(sass({
includePaths: ['node_modules/bootstrap-sass/assets/stylesheets']
}))
Then you should be fine to use:
#import 'bootstrap';
It will not import stuff like Javascript / Node.js. It will look for the bootstrap file in the same folder as the file which imports it. So yes, you need to use the long path or place the bootstrap file in the same folder.