Hei there, I cannot find the solution for my error.
Here is the assets structure:
-| assets
---| scss
-----| _grid_variables.scss
-----| ....
-----| variables.scss
Here is the _grid_variables.scss file:
$mobile-grid: 577px;
$tablet-grid: 768px;
$desktop-grid: 1024px;
Here is the variables.scss file:
#import "_colors_variables";
#import "_grid_variables";
#import "_fonts";
#import "_shadows";
Here is part of the package.json file:
{
...
"devDependencies": {
...
"node-sass": "^4.14.1",
"nodemon": "^1.18.9",
"sass": "^1.43.4",
"sass-loader": "^8.0.2"
}
}
*** I have tried diferent versions of node-sass and sass-loader:
node-sass#6.0.1 + sass-loader#10.2.0
node-sass#6.0.1 + sass-loader#8.0.2
.... and some other tryings
Here is part of my nuxt.config.js:
css: [
'~assets/scss/main.scss'
],
styleResources: {
scss: ['./assets/scss/variables.scss']
},
build: {
rules: [
{
test: /\.s[ac]ss$/i,
use: ['style-loader', 'css-loader', 'sass-loader']
}
],
extend(config, ctx) {}
},
And here is where I am trying to use the variable:
<style lang="scss" scoped>
...
#media screen and (max-width: $mobile-grid) {
.description-row {
text-align: center;
}
}
</style>
I really hope someone can help me to get out from this error.
I've found the solution for my Error:
I was including ./assets/scss/variables.scss in the styleResources in my nuxt.config.js, but I was forgetting to include the '#nuxtjs/style-resources' package (which was correctly installed) in the modules.
You can try this one. Write the following code inside nuxt.confit.js file. Surely it will work.
styleResources: {
scss: [
'~/assets/scss/variables.scss',
'~/assets/scss/_grid_variables.scss'
]
}
Related
i installed jetstream in laravel 8 by using documentation but it not displayed proper way.
here is the tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme');
`/** #type {import('tailwindcss').Config} */
module.exports = {
content: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./vendor/laravel/jetstream/**/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
],
theme: {
extend: {
fontFamily: {
sans: ['Nunito', ...defaultTheme.fontFamily.sans],
},
},
},
plugins: [require('#tailwindcss/forms'), require('#tailwindcss/typography')],
};
First finish your installation then compile assets:
npm install
npm run dev
Php artisan migrate
Afterwards still if it did not work
At the style section of app.blade.php you might be missing:
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
I am trying to load a global sass variable file into my Vue style tags. If I am understanding globalVueStyles right, this should Indicate a file to include in every component style. But when I set it up it seems to not do anything and when I run npm run dev I get an undefined variable error.
Here is my laravel mix code:
mix.js('resources/js/app.js', 'public/js')
.vue()
.sass('resources/sass/main.scss', 'public/css')
.options({
extractVueStyles: true,
globalVueStyles: 'resources/sass/utils/_variables.scss',
})
.version()
after doing this I thought I should have access to my variables in my .vue files by doing this:
<template>
<h1>Example Component hi test</h1>
</template>
<script>
export default {
}
</script>
<style lang="scss">
h1 {
font-size: 50px;
color: $blue;
}
</style>
And here is the error I am getting:
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
╷
4 │ color: $blue;
│ ^^^^^
╵
resources/js/components/HelloWorld.vue 4:11 root stylesheet
I'm sure I'm missing something, but any help on this would be appreciated.
I was led to answer from https://github.com/JeffreyWay/laravel-mix/issues/2896;
they seemed to upgrade the syntax the documentation can be found here:
https://github.com/JeffreyWay/laravel-mix/blob/467f0c9b01b7da71c519619ba8b310422321e0d6/UPGRADE.md#vue-configuration
When I tried your solution it did not work.
Here is how I managed to fix this issue, using this new/changed property additionalData, in previous versions this property was data or prependData.
mix.webpackConfig({
module: {
rules: [
{
test: /\.scss$/,
use: [
{
loader: "sass-loader",
options: {
additionalData: `#import "#/_variables.scss";
#import "#/_mixins.scss";
#import "#/_extends.scss";
#import "#/_general.scss";`
},
},
],
}
]
},
resolve: {
alias: {
'#': path.resolve('resources/sass'),
'~': path.resolve('/resources/js'),
'Vue': 'vue/dist/vue.esm-bundler.js',
}
},
output: {
chunkFilename: '[name].js?id=[chunkhash]',
},
});
mix.js('resources/js/app.js', 'public/js').vue()
.sass('resources/sass/app.scss', 'public/css')
.copyDirectory('resources/images', 'public/images');
if (mix.inProduction()) {
mix.version();
}
Note that alias for path 'resources/scss' is "#".
I hope this saved someone some time :)
I want to use SCSS in my Svelte application. For this purpose I decided to use svelte-preprocess package. So, this is the App.svelte component :
<script>
</script>
<main>
<h1 class="boom">Hello world!</h1>
</main>
<style type="text/scss">
main {
text-align: center;
padding: 1em;
max-width: 240px;
margin: 0 auto;
.boom {
color: #ff3e00;
text-transform: uppercase;
font-size: 4em;
font-weight: 100;
}
}
#media (min-width: 640px) {
main {
max-width: none;
}
}
</style>
This is the list of dependencies inside of package.json file:
"#rollup/plugin-commonjs": "^16.0.0",
"#rollup/plugin-node-resolve": "^10.0.0",
"#rollup/plugin-replace": "^2.3.4",
"node-sass": "^5.0.0",
"rollup": "^2.34.0",
"rollup-plugin-css-only": "^3.0.0",
"rollup-plugin-livereload": "^2.0.0",
"rollup-plugin-serve": "^1.1.0",
"rollup-plugin-svelte": "^7.0.0",
"rollup-plugin-terser": "^7.0.2",
"svelte": "^3.30.0",
"svelte-preprocess": "^4.6.1"
And this is the rollup.config.js file:
import svelte from 'rollup-plugin-svelte';
import commonjs from '#rollup/plugin-commonjs';
import resolve from '#rollup/plugin-node-resolve';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
// import css from 'rollup-plugin-css-only';
import serve from 'rollup-plugin-serve';
import replace from '#rollup/plugin-replace';
import sveltePreprocess from 'svelte-preprocess';
const isDevelopment = process.env.APP_ENV === 'development';
export default {
input: 'src/index.js',
output: {
sourcemap: false,
format: 'iife',
name: 'app',
file: 'public/js/bundle.js'
},
plugins: [
svelte({
compilerOptions: {
dev: isDevelopment,
},
preprocess: sveltePreprocess(),
}),
// css({output: 'bundle.css'}),
resolve({
browser: true,
dedupe: ['svelte'],
}),
commonjs(),
replace({
IS_DEVELOPMENT: isDevelopment,
}),
isDevelopment && serve({
contentBase: 'public',
historyApiFallback: true,
host: '0.0.0.0',
port: process.env.PORT || 5000,
headers: {
'Access-Control-Allow-Origin': '*',
},
}),
isDevelopment && livereload('public'),
!isDevelopment && terser(),
],
watch: {
clearScreen: false,
},
};
I followed instructions from that package, but when I try building my application I get this error in the console:
rollup v2.34.0
bundles src/index.js → public/js/bundle.js...
[!] Error: Identifier directly after number (Note that you need plugins to import files that are not JavaScript)
src/cmp/App/index.css (1:13)
1: main.svelte-1xjph0n.svelte-1xjph0n{text-align:center;padding:1em;max-width:240px;margin:0 auto}main.svelte-1xjph0n .boom.svelte-1xjph0n{color:#ff3e00;text-transform:uppercase;font-size:4em;font-weight:100}#media(min-width: 640px){main.svelte-1xjph0n.svelte-1xjph0n{max-width:none}}
^
Error: Identifier directly after number (Note that you need plugins to import files that are not JavaScript)
I guess it's a problem with rollup configs or version of some dependency. But how to understand it and how to solve this issue?
The issues lies in you commenting out the line css({output: 'bundle.css'}), in rollup.config.js, with the line present everything works.
I use mdc with laravel-mix but it's not loading scss files from node modules.
I tried some other solutions about giving includepaths in mix.sass, but they are not working.
I tried code in webpack.mix.js
const path = require('path');
let mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css', {
includePaths: ['./node_modules']
});
but its still giving me same error that
undefined
^
Can't find stylesheet to import. #import "#material/elevation/mixins";
For Laravel 6 I had to do it this way:
npm install --save material-components-web
app.scss:
#import "material-components-web/material-components-web";
webpack.mix.js:
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css', {
sassOptions: {
includePaths: ['./node_modules']
}
});
Yes, answer from Edmund Sulzanok is correct, add sassOptions but for me too:
Laravel VERSION = '6.7.0';
I had to upgrade npm package.json devDependencies
"devDependencies": {
...
"cross-env": "^6.0.3",
"laravel-mix": "^5.0.1",
...,
"resolve-url-loader": "^3.1.1",
"sass": "^1.25.0",
"sass-loader": "^8.0.2",
...
},
"dependencies": {
...
"material-components-web": "^4.0.0",
...
}
After modify package.json run npm install
npm install
You could see Packages outdated with
npm outdated
good luck
I am having big problems applying classes to my ul elements in React using SCSS and Webpack 4. I have upgraded my project to Webpack 4 ( #yesiamstupid )
If I taget a type of element (ul) it works.
My own class "navMenu" is never applied, though.
I can see the class in the web developer tools --> styles.scss
I expect the text background to be blue in the navigation.
[ app.js ]
import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import AppRouter from './routers/AppRouter';
import 'normalize.css/normalize.css';
import './styles/styles.scss';
const jsx = (
<Provider>
<AppRouter />
</Provider>
);
ReactDOM.render(jsx, document.getElementById('app'));
[ AppRouter.js ]
import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import StartPage from '../components/StartPage';
import Header from '../components/Header';
const AppRouter = () => (
<BrowserRouter>
<div>
<Header />
<Switch>
<Route path="/" component={StartPage} exact={true} />
</Switch>
</div>
</BrowserRouter>
);
export default AppRouter;
[ StartPage.js ]
import React from 'react';
const StartPage = () => (
<div>
Hello
</div>
);
export default StartPage;
[ Header.js ]
import React from 'react';
import { NavLink } from 'react-router-dom';
const Header = () => (
<header>
<h1>Test WP4</h1>
<ul className="navMenu">
<li><NavLink to="/" activeClassName="is-active" exact={true}>Here we are</NavLink></li>
<li><NavLink to="/undefined" activeClassName="is-active" exact={true}>This route is undefined</NavLink></li>
</ul>
</header>
);
export default Header;
[_base.scss]
html {
font-size: 62.5%;
}
body {
font-family: Helvetica, Arial, sans-serif;
font-size: $m-size;
}
button {
cursor: pointer;
}
button:disabled {
cursor: default;
}
.is-active {
font-weight: bold;
}
[ _settings.scss ]
// Colors
// Spacing
$s-size: 1.2rem;
$m-size: 1.6rem;
$l-size: 3.2rem;
$xl-size: 4.8rem;
$desktop-breakpoint: 45rem;
[ _header.scss ]
ul {
list-style-type: circle;
}
.navMenu {
text-align:center;
background:blue;
padding-top:400px;
}
[ styles.scss ]
#import './base/settings';
#import './base/base';
#import './components/header';
[ webpack.config.js ]
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = () => {
return {
watch: true,
//mode: 'development',
entry: ['babel-polyfill', './src/app.js'],
output: {
path: path.join(__dirname, 'public', 'dist'), //absolute path
filename: 'bundle.js' //name is whatever you want
},
module: {
rules: [{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
}, {
test: /\.svg$/,
loader: 'raw-loader'
}, {
test: /\.(sa|sc|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader',
],
}
]
},
plugins: [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: "style.css",
//chunkFilename: "chunk.css"
})
],
devtool: 'inline-source-map',
devServer: {
contentBase: path.join(__dirname, 'public'), //absolute path
historyApiFallback: true, //go to index if path not found
publicPath: '/dist' //specify where bundle files liveY
}
};
}
I recommend you to split your tests for css and scss files.
In your code you are using sass-loader for css. Instead use something like this:
{
test: /\.css$/,
include: 'path-to-css-files',
use: [
MiniCssExtractPlugin.loader,
'css-loader'
],
},
{
test: /\.(sa|sc)ss$/,
exclude: 'path-to-css-files',
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader'
],
},