I'm currently working on implementing SASS in our Vue 2.6.10 webpack application as our team is looking to transition from LESS to SCSS for our legacy application. In my package.json, I've added the following dependencies under devDependencies based on the documentation:
- sass (v1.32.8)
- sass-loader (v10.1.1)
Additionally, I've included node-sass (v5.0.0) in my dependencies. My current node version is v15.4.0, which aligns with the requirements stated in the documentation for node-sass v5+.
Within my Vue components, I'm attempting to utilize selectors like /deep/, ::v-deep, or >>>. In a functional sandbox playground that mirrors the versions of tools used in my project, I managed to make it work by targeting a child component's styles within a parent component using /deep/ as shown below:
<style lang="scss" scoped>
.parent-container {
& /deep/ .child-comp {
background-color: tomato;
color: white;
}
}
</style>
However, upon replicating the exact setup in my actual application, I encountered a compile error:
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: expected selector.
╷
77 │ & /deep/ .child-test{
│ ^
╵
src/components/MenuBarComp.vue 77:5 root stylesheet
Despite trying various suggestions, including using ::v-deep and >>> selectors instead, none yielded the desired output. This led me to discover that these selectors might not be supported in SCSS according to certain sources.
After multiple attempts over several days, such as downgrading versions of node-sass, sass, and sass-loader, running npm rebuild node-sass --force, deleting the node_modules directory, clearing the npm cache, and more, the issue persists.
The existing CSS-related packages listed in my package.json are as follows:
- css-loader (v3.1.0)
- less (v3.0.4)
- less-loader (v4.1.0)
- mini-css-extract-plugin (v0.6.0)
- optimize-css-assets-webpack-plugin (v5.0.3)
- postcss-import (v11.0.0)
- postcss-loader (v2.0.8)
- postcss-url (v7.2.1)
- vue-style-loader (v3.0.1)
Below is an overview of how my loaders are configured in webpack:
function generateLoaders(loader, loaderOptions) {
const loaders = options.usePostCSS
? [cssLoader, postcssLoader]
: [cssLoader];
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap,
}),
});
}
// Extract CSS when specified during production build
if (options.extract) {
return [MiniCssExtractPlugin.loader].concat(loaders);
} else {
return ['vue-style-loader'].concat(loaders);
}
}
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass'),
scss: generateLoaders('sass', {
additionalData: `
@import "@/styles/_variables.scss";
`,
}),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus'),
};
};
If anyone has insights on resolving the issue with the /deep/ selector in this context, your assistance would be greatly appreciated!