Switching css file based on condition like theme name, brand name etc. Using this solution, you will easily switch css based on conditon.
- "node-sass"
- "style-loader"
Adding prefix "Useable" in your css file like this "theme.useable.scss"
module.exports = {
chainWebpack: config => {
config.module.rule('scss').exclude.add(/\.useable.scss$/)
config.module
.rule('scss-useable')
.test(/\.useable.scss$/)
.use('style-loader/useable')
.loader('style-loader/useable')
.end()
.use('css-loader')
.loader('css-loader')
.end()
.use('postcss-loader')
.loader('postcss-loader')
.end()
.use('sass-loader')
.loader('sass-loader')
}
}
Refereance url :Useable Reference. chaining-advanced Reference
import blueStyles from '../../scss/blue-theme.useable.scss'
export default blueStyles.use()
Styles are used: blueStyles.use() Styles are removed: blueStyles.unuse()
// Split each import into a separate chunk (https://router.vuejs.org/guide/advanced/lazy-loading.html).
const redThemecss = () => import('./lib/css/red-theme')
const blueThemecss = () => import('./lib/css/blue-theme')
// This means they can be loaded conditionally (https://webpack.js.org/loaders/style-loader/#useable).
// This feature is enabled in ./vue.config.js > chainWebpack.
Vue.config.productionTip = false
switch ('RED') {
case 'RED': {
redThemecss()
break
}
case 'BLUE': {
blueThemecss()
break
}
}