Vue.JSアプリケーションで動的なスタイルを使用しようとしています。アイデアは、静的CSSにSCSSテーマを構築し、それをテンプレートのように使用してテーマを切り替えることです。
私はCSSフレームワークとしてbulmaを使用しているので、私のスタイルはすべて次のようになります。
theme-1.scss
$primary: wheat;
@import 'bulma/bulma';
現在のソリューションは、デフォルトのwebpack構成を持つブートストラップされたvueアプリケーションです。scssをcssにビルドしてさらに使用することができたのは、次の構成だけでした。
const path = require('path');
module.exports = {
mode: 'development',
entry: {
functions: [
'./src/index.js',
'./src/scss/theme1.scss',
'./src/scss/theme2.scss'
],
},
output: {
path: path.resolve(__dirname, 'src'),
filename: 'dist/js/[name].js',
},
module: {
rules: [
{
test: /\.scss$/,
use: [
{
loader: 'file-loader',
options: {
name: 'dist/css/[name].css',
}
},
{
loader: 'sass-loader'
}
]
}
]
},
};
残念ながら、vueアプリで複数のエントリを使用することはできません。また、シングルページアプリケーションを操作する正しい方法ではないようにも思えます
私はwebpackとvue-loaderにまったく慣れていないので、私はすべてを間違って行い、間違った方法で考えていると思います。たぶん、私がしたいのと間違いなく同じことをするプラグインがいくつか存在しますか？
この問題の解決策は次のとおりです。
私のvue.config.jsで私は以下を作りました：
module.exports = {
chainWebpack: config => {
config.entry('theme') // you can add here as much themes as you want
.add('./src/theme.scss')
.end();
},
css: {
extract: {
filename: '[name].css', // to have a name related to a theme
chunkFilename: 'css/[name].css'
},
modules: false,
sourceMap: true
},
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加