AdsonCicilioti posted a new question
postcss-import-resolver •
@RyosukeCla For me not work.
My Css looks like this:
in nuxt.config.js
:
/*
** Global CSS
*/
css: ['~/assets/style/src/main.scss'],
This main.scss
looks like this:
// BULMA utilities
@import '../../../node_modules/bulma/sass/utilities/all';
// Theming
@import './css-vars';
@import './theme-vars';
// Bases
@import '../../../node_modules/bulma/bulma';
@import '../../../node_modules/buefy/src/scss/buefy';
The css-vars.scss
file contains some css variables with values that will serve the sass variables of the theme-vars.scss
file, with the intention that all classes that use these variables receive the variable css and not the value of it. Example:
Desired final output:
.is-primary {
background-color: var(--primary);
}
// or with fallback
.is-primary {
background-color: var(--primary, #7957d5);
}
Current output (unwanted):
.is-primary {
background-color: #7957d5;
}
My nuxt.conf.js
like this:
const pkg = require('./package')
const purgecss = require('@fullhuman/postcss-purgecss')
const postcssCustomProps = require('postcss-custom-properties')
module.exports = {
mode: 'universal',
/*
** Headers of the page
*/
head: {
title: pkg.name,
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: pkg.description }
],
link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
},
/*
** Customize the progress-bar color
*/
loading: { color: '#FFFFFF' },
/*
** Global CSS
*/
css: ['~/assets/style/src/main.scss'],
/*
** Plugins to load before mounting the App
*/
plugins: ['@/plugins/buefy'],
/*
** Nuxt.js modules
*/
modules: [
// Doc: https://github.com/nuxt-community/axios-module#usage
'@nuxtjs/axios'
],
/*
** Axios module configuration
*/
axios: {
// See https://github.com/nuxt-community/axios-module#options
},
/*
** Build configuration
*/
build: {
/*
** You can extend webpack config here
*/
extractCSS: true,
extend(config, ctx) {
// Run ESLint on save
if (ctx.isDev && ctx.isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
}
},
postcss: {
plugins: [
purgecss({
content: [
'./pages/**/*.vue',
'./layouts/**/*.vue',
'./components/**/*.vue'
],
whitelist: ['html', 'body'],
whitelistPatterns: [/nuxt-/]
}),
postcssCustomProps({
warnings: false,
preserve: true
})
]
}
}
}
The postcss-custom-properties': false
setting, or postcss-custom-properties': { preserve: true }
should make the css variables in css-vars.scss be kept in the final css file - this is mine intention. - but this does not happen.
Would anyone know how to give me a way to solve this and keep the css variables in the final css file?
strunkie30 posted a new question
postcss-import-resolver •
How can I use iconfont-webpack-plugin with Nuxt.js? It's not possible to activate this iconfont plugin in the Nuxt.js config.
https://github.com/jantimon/iconfont-webpack-plugin/issues/20