The #nuxtjs/style-resources module isn't importing my scss files. I have a special folder structure to generate multiple websites from one Nuxt project, I think this might cause the problem.
This is what my folder structure looks like:
/
package.json
/src
/site-one
/site-two
/shared
nuxt.config.js
/assets
/scss
imports.scss
This is what my nuxt.config file in /shared looks like:
modules: [
'#nuxtjs/style-resources',
],
styleResources: {
scss: [
'./assets/scss/imports.scss',
]
},
I tried '~assets/scss/imports.scss' without success.
I also tried making an alias like so:
build: {
...
extend(config, ctx) {
config.resolve.alias['~sharedPath'] = __dirname
}
}
and using a path like this: '~sharedPath/assets/scss/imports.scss' but that doesn't seem to work either.
I'm not sure what else I can try to make #nuxtjs/style-resources import my scss files, please help.
I fixed it like so:
modules: [
'#nuxtjs/style-resources',
],
styleResources: {
scss: [
__dirname + '/assets/scss/imports.scss',
]
},
Short syntax of passing in config didn't work for me:
Does not work:
modules:[
[
'#nuxtjs/style-resources', {
scss: [ "~css/variables.scss"],
}
]
]
Works:
modules: ["#nuxtjs/style-resources"],
styleResources: {
scss: ["~css/variables.scss"]
},
Related
my class from variable is not working, im sure its mix problem.
<div class="rounded bg-gradient-to-r {{$replay->playerOneTeam()}}">
Team: {{ $replay->playerOneTeam()}}
</div>
It seems like purgeCSS or something is removing class "from-red-400". When I set it manually and do npm run dev it works, but when it's used from variable, it's not loading. The class is in code when I inspect but the code runs like it doesn't exist.
Check your tailwind.config.js file and look for something like this:
module.exports = {
mode: 'jit',
purge: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./vendor/laravel/jetstream/**/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
'./resources/js/**/*.vue',
],
// ...
}
In this example, JIT mode is enabled and purge is where you can specify files where to look for used Tailwind CSS classes. From here, you have three options:
[Not recommended] Disable JIT mode.
Follow the guidelines here to make sure the compiler sees your class name in those files you specified, i.e. to write purgeable HTML code in those files.
Divide purge into content and safelist so the compiler doesn't accidentally remove your classes specified there (which will be classes that do not appear explicitly in purgeable HTML code).
Using the example above, the third option would look something like this:
module.exports = {
mode: 'jit',
purge: {
content: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./vendor/laravel/jetstream/**/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
'./resources/js/**/*.vue',
],
safelist: [
'from-red-400', // this is the class you wanted
// ... some other classes you may need
'bg-blue-500', // example class
'text-center', // example class
'hover:opacity-100', // example class
]
},
// ...
}
in 2023, if someone has the same problem, this was the solution that I found working:
Add this in tailwind.config.js
safelist: [
'bg-blue-100',
{
pattern: /bg-(gray|red|orange|amber|yellow|green|lime|blue|sky|teal|indigo|violet|purple|pink)-(50|100|200|300|400)/,
},
{
pattern: /text-(gray|red|orange|amber|yellow|green|lime|blue|sky|teal|indigo|violet|purple|pink)-(500|600|700|800)/,
},
],
I need to compile the same scss file two times, with different sassOptions. Something like:
mix.sass('resources/sass/master.scss', 'public/css', {
sassOptions: {
includePaths: [
'resources/sass/firstconfig'
],
}
})
.sass('resources/sass/master.scss', 'public/css', {
sassOptions: {
includePaths: [
'resources/sass/secondconfig'
],
}
})
Ideally, this would generate a master_firstconfig.css and a master_secondconfig.css. Then, depending on the current config, I will load the sheet I need (I got this part covered).
Is this possible? When I try to do it, it says I cant mention the same file twice.
I have a little module that I am sharing across a few projects. It is successfully exporting components, but now I'd like to get my global style vars, like $contoso-primary: #ff0000 to be exported as well so we can start sharing CSS vars in my consuming app, like background-color: $contoso-primary. I'm using the rollup.js, is this possible with this library or with its plugins? If so, what plugin am I looking for? I've tried postcss already but doesn't appear to work unless I'm missing something.
export default {
input: 'src/index.js',
output: [
{
file: pkg.main,
format: 'cjs',
sourcemap: true
},
{
file: pkg.module,
format: 'es',
sourcemap: true
}
],
plugins: [
external(),
postcss({
extract: true
}),
url(),
svgr(),
babel({
exclude: 'node_modules/**'
}),
resolve(),
commonjs()
],
onwarn(warning, warn) {
if (
warning.code === 'CIRCULAR_DEPENDENCY'
&& warning.importer.indexOf('node_modules/semantic-ui-react') > -1
) return;
warn(warning);
}
};
my scss file that has my vars looks something like:
$primary: #177757,
$secondary: #D50000
and in the consuming project I'd like to refer to these in my scss files like:
.button {
background: $primary
}
I can't get an .css file into my dist folder, and the documenation on rollup-plugin-postcss is a little light.
postcss-simple-var this plugin will able to share sass like variables.
plugins: [
postcss({
plugins: [
simplevars()
],
extensions: [ '.css' ],
}),
...
]
for more information read this article.
I was able to make this work by duplicating the variable declarations in both the postcss.config.js and rollup.config.js
Rollup config:
import postcss from "rollup-plugin-postcss";
import postcssSimpleVars from "postcss-simple-vars";
const variables = require("./pathTo/variableConfig.js");
...
const config = {
...
plugins: [
postcss({
postcssSimpleVars({
variables: function () {
return variables;
}
}),
})
]
postCSS config:
const variables = require("./variableConfig.js");
plugins: [
...
require("postcss-simple-vars")({
variables: variables
})
]
variableConfig.js:
const baseDir = "../src/utils/constants";
const { COLORS } = require(`${baseDir}/colors`);
const { MQ } = require(`${baseDir}/mediaQueries`);
const { BREAKPOINTS } = require(`${baseDir}/breakpoints`);
const cssVars = Object.assign(COLORS, MQ, BREAKPOINTS);
module.exports = cssVars;
I have an environment variable CDN_URL and I want to send this variable to the SCSS file.
I am also tried prependData of sass-loader.
I have to use Laravel 5.7, Laravel Mix 4.1.2 and webpack 4.27.1
error: Invalid CSS after "...load the styles": expected 1 selector or at-rule, was "var content = requi"
Below is my 'webpack.mix.js' file code.
mix.webpackConfig({
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [
'vue-style-loader',
'style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
indentedSyntax: true,
prependData: '$cdn-s3-static-url: ' + process.env.CDN_S3_STATIC_URL + ';',
},
},
],
},
],
},
});
Below is my '_functions.scss' file code:
#function asset($type, $file) {
#return url('#{$cdn-s3-static-url}#{$asset-base-path}#{$type}/#{$file}');
}
In my case I was running a gatsby site. Before each build, it runs gatsby-config.js, which has access to environment variables.
So at the top of the .js file that builds, before module.exports, I put this:
if(process.env.NODE_ENV === 'development') {
fs.writeFileSync('./src/styles/build-style.scss','$root: "/development-path/";');
} else {
fs.writeFileSync('./src/styles/build-style.scss','$root: "/production-path/";');
}
This results in a file which looks like:
$root: "/development-path/";
Then in the SCSS files where I needed ENV-dependent behaviour, I have:
#import './build-style.scss';
#font-face {
font-family: "MyFontFamily";
src: url($root + "font/MyFontFamily.woff") format('woff');
}
And now my asset (font in this example) loads from different spots depending on my dev/production environment variable.
It feels like a big hack and I'm sure there's a more correct way somewhere, but this got me moving again after an hour stoppage and it is working so far. I will probably extend it in the future to have build-style-dev.scss, build-style-prod.scss, and just copy them into build-style.scss at compile time. Or research the correct way.
You can prepend data to SASS using sass-loader
For example to pass the CDN_URL from .env
Extend webpack.mix.js
module.exports = {
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [
'style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
prependData: '$env: ' + process.env.CDN_URL + ';',
},
},
],
},
],
},
};
You may inject environment variables into Laravel Webpack Mix by prefixing a key in your .env file with MIX_. After the variable has been defined in your .env file, you may access via the process.env object.
So in your example, you should create a new variable in .env file like MIX_CDN_URL and inside webpack.mix.js you can access it using
process.env.MIX_CDN_URL
You can sass-loader that will achieve the results you desire.
I am trying to set up Browserify with Elixir and Browserify Shim on Laravel 5.2 to use Gulp with my JavaScript files, but I didn't have much luck so far. This should be pretty straightforward to do, but it isn't.
Here is my package.json
{
"private": true,
"devDependencies": {
"gulp": "^3.8.8"
},
"dependencies": {
"bootstrap-sass": "^3.0.0",
"browserify-shim": "^3.8.12",
"jquery": "^2.2.0",
"jquery-ui": "^1.10.5",
"laravel-elixir": "^4.0.0"
},
"browser": {
"app": "./resources/assets/js/app.js",
"utils": "./resources/assets/js/utils.js",
},
"browserify": {
"transform": [
"browserify-shim"
]
},
"browserify-shim": {
"app": {
"depends": [
"jquery:$",
"utils:Utils"
]
},
"utils": {
"depends": [
"jquery:$"
]
},
}
}
gulpfile.js
var elixir = require('laravel-elixir');
elixir(function (mix) {
mix.browserify('main.js', './public/js/bundle.js');
});
Entry script main.js looks like this:
var $ = require('jquery');
var Utils = require('utils');
var App = require('app');
app.js
var App = {
init: function(){
console.log(Utils);
Utils.doSomething();
}
//other methods
};
In short: Utils depends on $, and App depends on both $ and Utils.
When I hit gulp from terminal, bundle.js is correctly created. All scripts are wrapped up in Browserify code (as expected). Each script has all included dependencies, like I configured in package.json so this part looks good as well.
The problem is that all my included dependencies are empty objects. For example, Utils in app.js is empty, and I get an error when I try to call its method "doSomething". Console log prints out an empty object "{}" instead of real object. The only correctly included script is jQuery and it's not an empty object.
What could be wrong here? Do I need to make some changes in my JS files or in configuration to make this work? It looks like I'm pretty close to the solution, but it still does not work and I can't use it at all.
It is the easiest solution to directly use 'exports' from browserify-shim property:
"browserify-shim": {
"app": {
"exports": "App",
"depends": [
"jquery:$",
"utils:Utils"
]
},
"utils": {
"exports": "Utils",
"depends": [
"jquery:$"
]
},
}
Take a look at this repo which I believe shows the fixed version of your app. The issue is that your app.js and utils.js modules aren't exporting anything to their respective require calls. One option is to add a line like:
module.exports = App;
to the bottom of your app.js file, and the equivalent to the bottom of your utils.js file. You'll see if you test the repo that badapp doesn't have this line and produces the exact behavior you're describing.
See this answer for an explanation of the issue.