I have three .scss files in my Vue project.
The main global one, which I have imported to my main app component.
Then, the other two are ones that container variables, and with such cannot be important in the same way, as the variable cannot be found.
So, I created a vue.config.js file, and added -
module.exports = {
css: {
loaderOptions: {
sass: {
data: `#import "#/styles/_variables.scss";`
},
}
}
};
The issue is, that imports my _variables.scss file, but I also want to import a _other.scss file (from the same folder).
I cannot figure out how to structure it for it to import and use both.
If you're using sass-loader 8 or above, you need to use prependData instead of data. For example:
module.exports = {
css: {
loaderOptions: {
sass: {
prependData: `
#import "#/styles/_variables.scss";
#import "#/styles/_variables2.scss";
`
}
}
}
};
#import "#/styles/_variables.scss"; #import "#/styles/_other.scss"
Worked perfectly. But so did importing into one large file, and loading that.
Related
While developing a Vue web component, using #vue/web-component-wrapper, the styles of npm_modules are not applied. The css actually isn't loaded at all.
Here is my main.js:
import Vue from 'vue';
import wrap from '#vue/web-component-wrapper';
import App from './App.vue';
import '#/modules/filters';
import '#fortawesome/fontawesome-free/css/all.css';
import '#fortawesome/fontawesome-free/js/all';
const wrappedElement = wrap(Vue, App);
window.customElements.define('hello-there', wrappedElement);
Before that, I had the problem, that even my normal css wasn't applied. I resolved this, by help of the answer of this question: Styling not applied to vue web component during development
Even those imported styles in main.js:
import '#fortawesome/fontawesome-free/css/all.css';
won't load at all.
First thought -> there is something wrong with the webpack css-loader/vue-style-loader
Here is my vue.config.js (using the workaround from the above mentioned question):
function enableShadowCss(config) {
const configs = [
config.module.rule('vue').use('vue-loader'),
config.module.rule('css').oneOf('vue-modules').use('vue-style-loader'),
config.module.rule('css').oneOf('vue').use('vue-style-loader'),
config.module.rule('css').oneOf('normal-modules').use('vue-style-loader'),
config.module.rule('css').oneOf('normal').use('vue-style-loader'),
config.module.rule('postcss').oneOf('vue-modules').use('vue-style-loader'),
config.module.rule('postcss').oneOf('vue').use('vue-style-loader'),
config.module.rule('postcss').oneOf('normal-modules').use('vue-style-loader'),
config.module.rule('postcss').oneOf('normal').use('vue-style-loader'),
config.module.rule('scss').oneOf('vue-modules').use('vue-style-loader'),
config.module.rule('scss').oneOf('vue').use('vue-style-loader'),
config.module.rule('scss').oneOf('normal-modules').use('vue-style-loader'),
config.module.rule('scss').oneOf('normal').use('vue-style-loader'),
config.module.rule('sass').oneOf('vue-modules').use('vue-style-loader'),
config.module.rule('sass').oneOf('vue').use('vue-style-loader'),
config.module.rule('sass').oneOf('normal-modules').use('vue-style-loader'),
config.module.rule('sass').oneOf('normal').use('vue-style-loader'),
config.module.rule('less').oneOf('vue-modules').use('vue-style-loader'),
config.module.rule('less').oneOf('vue').use('vue-style-loader'),
config.module.rule('less').oneOf('normal-modules').use('vue-style-loader'),
config.module.rule('less').oneOf('normal').use('vue-style-loader'),
config.module.rule('stylus').oneOf('vue-modules').use('vue-style-loader'),
config.module.rule('stylus').oneOf('vue').use('vue-style-loader'),
config.module.rule('stylus').oneOf('normal-modules').use('vue-style-loader'),
config.module.rule('stylus').oneOf('normal').use('vue-style-loader'),
];
configs.forEach((c) =>
c.tap((options) => {
options.shadowMode = true;
return options;
})
);
}
module.exports = {
chainWebpack: (config) => {
enableShadowCss(config);
},
configureWebpack: {
output: {
libraryExport: 'default',
},
resolve: {
symlinks: false,
},
module: {
rules: [
{
test: /\.ya?ml$/,
use: 'raw-loader',
sideEffects: true,
},
],
},
},
css: {
extract: false,
loaderOptions: {
sass: {
additionalData: `#import "#/styles/_variables.scss";`,
},
},
},
};
So I tried to add css-loader/vue-style-loader manually to webpack with:
chainWebpack: (config) => {
enableShadowCss(config);
config.module
.rule('css')
.test(/\.css$/)
.use('css-loader')
.loader('css-loader')
.end();
},
maybe those styles load now, but it throws an syntax error whilst building anyways:
./node_modules/#fortawesome/fontawesome-free/css/all.css
Syntax Error: CssSyntaxError
(1:4) /Users/.../node_modules/#fortawesome/fontawesome-free/css/all.css Unknown word
> 1 | // style-loader: Adds some css to the DOM by adding a <style> tag
| ^
2 |
3 | // load the styles
I know I know, seems obvious but those lines don't appear in the file at all. Maybe in an imported file though.
Without using the wc-wrapper everything works fine!!
Well anyways... no clue what I should try next. I am a newbie to webpack and Vue!
If anybody has an idea I would greatly appreciate it!
Cheers
I have Vue.js project I've setup previously that dynamically adds defined .scss files to my .vue template files, so I can access my variables, mixins, etc. in the templates without #importing them, or having them duplicate code from imports.
My problem is I'm setting up a NativeScript/Vue.js project with vue-cli-plugin-nativescript-vue and was curious if anyone has successfully setup their webpack to allow the same functionality. It's my understanding that the plugin replaces webpack with the latest when you run, as specified in the docs https://cli.vuejs.org/guide/webpack.html#replacing-loaders-of-a-rule.
Below is my vue.config.js (which compiles with no error) but doesn't seem to be working. I'm probably missing something or don't understand exactly how this is working, any help is appreciated.
const path = require('path')
module.exports = {
chainWebpack: config => {
const ofs = ['vue-modules', 'vue', 'normal-modules', 'normal']
const cssRules = config.module.rule('css')
const postRules = config.module.rule('postcss')
const addSassResourcesLoader = (rules, type) => {
rules
.oneOf(type)
.use('sass-resoureces-loader')
.loader('sass-resources-loader')
.options({
resources: './src/styles/_global.scss', // your resource file or patterns
})
}
ofs.forEach(type => {
addSassResourcesLoader(cssRules, type)
addSassResourcesLoader(postRules, type)
})
return config
},
}
Vue CLI provides a config to augment your CSS loaders:
// vue.config.js
module.exports = {
css: {
loaderOptions: {
scss: {
// sass-loader#^8.0.0
prependData: `import "~#/styles/_global.scss";`,
// sass-loader#^9.0.0 or newer
additionalData: `import "~#/styles/_global.scss";`,
}
}
}
}
I have the problem that mochapack does not seem to work together with the style resources loader.
packages that seem to produce the problem:
"#vue/cli-plugin-unit-mocha": "~4.2.0",
"vue-cli-plugin-style-resources-loader": "~0.1.4"
My vue.config.js file:
const path = require("path");
module.exports = {
...
pluginOptions: {
"style-resources-loader": {
preProcessor: "scss",
patterns: [path.resolve(__dirname, "./src/assets/styles/*.scss")]
}
}
};
The single sass file that is included through the above config:
#import "~vue-select/src/scss/vue-select.scss";
It seems to load the vue-select.scss correctly but then when interpreting this file it seems to loose its current directory and does not find the imported style.
Error log excerpt:
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
╷
1 │ #import "global/variables";
│ ^^^^^^^^^^^^^^^^^^
╵
/node_modules/vue-select/src/scss/vue-select.scss 1:9 #import
/src/components/HelloWorld.vue 1:9
See full detail error message and code:
https://github.com/petritz/food-calculator-web/runs/560575367
I'm using Mocha for my Unit Tests. After having the same issue, I noticed that I had to change my vue.config.js from:
module.exports = {
publicPath: "/",
css: {
sourceMap: true,
loaderOptions: {
sass: {
prependData: `#import "#/scss/main.scss";`
}
}
}
};
to:
module.exports = {
publicPath: "/",
css: {
sourceMap: true,
loaderOptions: {
scss: {
additionalData: `#import "#/scss/main.scss";`
}
}
},
chainWebpack: config => {
if (
process.env.NODE_ENV === "test" ||
process.env.NODE_ENV === "production"
) {
const scssRule = config.module.rule("scss");
scssRule.uses.clear();
scssRule.use("null-loader").loader("null-loader");
}
}
};
EDIT: This might have some issues with local dev and production, so I had to change a couple of things:
I upgraded the sass-loader to at least 10.1.0
I had to install the null-loader to work around with CSS Preprocessor modules
I had to use chainWebpack in the vue.config.js to use the null-loader in my test and production environments
I found the answer in this open issue on the Vue CLI GitHub repo: https://github.com/vuejs/vue-cli/issues/4053#issuecomment-544641072
So, when I was using Vue-cli 3.X I used a method similar to This Thread to load my many style files globally.
However, I have upgraded to Vue-cli 4.X and since then, have been unable to use this technique. I just get this error:
./src/App.vue?vue&type=style&index=0&lang=scss& (./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=0&lang=scss&)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable: "$grey-700".
on line 8 of src/styles/global.scss
from line 12 of /Users/kieranparker/Desktop/Personal/Side Projects/Dev/landingpages/src/App.vue
>> color: $grey-700;
---------------^
Essentially, anything outside of the main screens (such as components) just will not grab anything in my "_variables.scss". (Even if I import them all into one file and use that)
Any suggestions?
(Quick update)
I am using node-sass and my config looks like so;
module.exports = {
css: {
loaderOptions: {
sass: {
data: `
#import "#/scss/_variables.scss";
#import "#/scss/_mixins.scss";
`
}
}
}
};
Ok so, previously it was a case of just using "data:"
But, since Vue 4, it seems it now has to be "prependData:"
module.exports = {
css: {
loaderOptions: {
sass: {
prependData: `#import "~#/styles/_variables.scss";`
}
}
}
}
it's changed to additionalData
module.exports = {
css: {
loaderOptions: {
sass: {
additionalData: `#import "~#/styles/_variables.scss";`
}
}
}
}
I built my simple site using Vue UI (the ones that comes with Vue-CLI 3), and it created sourcemaps in the /dist folder. I deploy these sourcemaps along with the production files. When I load up my site, Chrome indicates it cannot parse the sourcemaps in Devtools.
DevTools failed to parse SourceMap: https://www.thisisnotarealdomain.net/js/app.92ef018b.js.map
I have tried the following in vue.config.js:
module.exports = {
css: {
// modules: true,
loaderOptions: {
// pass options to sass-loader
sass: {
// #/ is an alias to src/
// so this assumes you have a file named `src/scss/variables.scss`
data: `#import "#/scss/_globals.scss";`
}
}
},
configureWebpack: {
devtool: '#source-map'
}
}
and
module.exports = {
css: {
// modules: true,
loaderOptions: {
// pass options to sass-loader
sass: {
// #/ is an alias to src/
// so this assumes you have a file named `src/scss/variables.scss`
data: `#import "#/scss/_globals.scss";`
}
}
},
configureWebpack: {
devtool: '#cheap-eval-source-map'
}
}
But Chrome still complains and I cannot see my original source.
I found some articles on the Internet regarding Webpack and Chrome interaction with sourcemaps, but I cannot tell if the problem has been resolved. Is there a problem with sourcemaps created by Vue UI?
Thanks.