من به webpack خودم یک فایل scss معرفی کردم .
داخل فایل scss خودم یک فایل scss دیگر رو با دستور @use فراخوانی کردم :
style.scss:::::::::
@use '@material/button/mdc-button';
@use '@material/button';
مشکلم اینه که وقتی که کامپایل تموم میشه فایل css تولید شده داخلش فقط متن زیر هست .
bundle.css::::::::
@use '@material/button/mdc-button';
@use '@material/button';
در صورتی که باید دیتای فایل @material/button/mdc-button رو بره بگیره بریزه داخل فایل bundle.css .
جالب ابنجاست وقتی از پکیج webpack-dev-server استفاده میکنم خیلی خوب فایل هامو ایمپورت میکنه اما اگه ازش استفاده نکنم و با کامند لاین خودم بخوام npm run build بزنم اینطوری میشه.
تنظیمات webpack.config.js
const autoprefixer = require('autoprefixer');
module.exports = [{
entry: './template/sass/style.scss',
output: {
// This is necessary for webpack to compile
// But we never use style-bundle.js
filename: 'style-bundle.js',
},
module: {
rules: [
{
test: /\.scss$/,
use: [
{
loader: 'file-loader',
options: {
name: 'bundle.css',
},
},
{ loader: 'extract-loader' },
{ loader: 'css-loader' },
{
loader: 'postcss-loader',
options: {
plugins: () => [autoprefixer()]
}
},
{
loader: 'sass-loader',
options: {
sassOptions: {
includePaths: ['./node_modules']
},
// Prefer Dart Sass
implementation: require('sass'),
}
}
]
}
]
},
}];
با import مشکلم حل میشه نمیدونم چرا .
من به این کتابخونه نیاز دارم و این کتابخونه همتو خود سایتش داره از این روش استفاده میکنه
اینم روشی که گفت و منم مو به موی خودش رفتم ( البته این میگه از webpack-dev-server استفاده بشه ) ولی من دارم بدون این استفادهینکنم و دقیقا برای همینمشکل خوردم اما ایا راهی نیست که بشه
https://material.io/develop/web/docs/getting-started/
جالبه که خودش یک نمونه انلاین داده . تو نمونه انلاین داره از import استفاده میکنه :
https://glitch.com/~material-starter-kit
اما مشکلم اینه که یکی دو تا نیست که برم و تغییربدم بهimportچند 10 تا فایل هست که تو هر کدومش کلی از @use استفاده شده
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟