Создайте css из scss, затем перейдите в определенную папку, но не включайте в заголовок

Question

У меня есть приложение angular 6, которое использует webpack 4 (я не использую ng cli) и имеет такую ​​структуру:

myNgApp/
├── config/
│   ├── webpack.common.js
│   ├── webpack.dev.js
│   ├── webpack.prod.js
|   ├── // other webpack related scripts
└── src/
    └─ app/
       ├─ themes/
       |    ├── dark.theme.scss
       |    └── blue.theme.scss
       ├─ components/
       ├─ app.component.scss
       ├─ app.component.html
       ├─ app.component.ts
       ├─ app.module.ts

 ... // More files

То, чего я хочу достичь, это:

• создание отдельных файлов CSS [app.css, vendor.css, dark.theme.css, blue.theme.css]
• перемещение 2 основных файлов CSS (app.css, vendor.css) впапку dist/css и включите их в тег head моего приложения
• переместите файлы темы (dark.theme.css, blue.theme.css) в папку dist/css/themes, но не включайте их в мои приложения head tag (я хочу управлять темами через мое приложение)

Поэтому мой пакет должен выглядеть так:

myNgApp/
├── dist/
│   ├── css/
│   │    ├── themes/
│   │    │    ├── dark.theme.css
│   │    │    ├── blue.theme.css
│   │    │
│   │    ├─ app.css    
|   |    └─ vendor.css
│   │
│   └── // other files    
│
├── config.sh
└── install.bat
 ... // More files

Мой текущий webpack.common.js:

module.exports = {
entry: {
    "polyfills": "./src/polyfills.ts",
    "vendor": "./src/vendor.ts",
    "app": "./src/main.ts"
},

resolve: {
    extensions: [".ts", ".js"]
},

module: {
    rules: [
        {
            test: /\.(css|scss)$/,
            include: [
                path.resolve(__dirname, "./src/app/themes")
            ],
            use: [
                {
                    loader: "css-loader",
                    options: {
                        sourceMap: true
                    }
                }
            ]

        },
        {
            test: /\.(css|scss)$/,
            use: [
                {
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: '../'
                    }
                },
                {
                    loader: "css-loader",
                    options: {
                        sourceMap: true
                    }
                },
                {
                    loader: "sass-loader",
                    options: {
                        sourceMap: true,
                        includePaths: [
                            path.resolve(__dirname, "../src/app/")
                        ]
                    }
                }
            ]
        }
    ]
},

plugins: [
]
};

Answer 1

Вы можете установить свой ключ ввода как место назначения вывода, основываясь на вашем пути вывода.Итак, во-первых, вам нужно output ...

output: {
  path: path.join(__dirname, "dist"),
  filename: "[name].js"
}

Теперь ваш entry: {"app": "./src/main.ts"} перейдет в dist;dist/app.js

Добавить записи для where the file should go based on dist: where the file is now.Имейте в виду, что вы получите дополнительный js файл для каждого scss файла, но вы можете удалить / проигнорировать их.

entry: {
    "polyfills": "./src/polyfills.ts",
    "vendor": "./src/vendor.ts",
    "app": "./src/main.ts",
    "./css": "path-to-app.scss",
    "./css": "path-to-vendor.scss",
    "./css/themes: "path-to-blue.theme.scss",
    "./css/themes: "path-to-dark.theme.scss",
}

Кроме того, с этой настройкой ^, думаю, вы тольконужно 1 правило для всех ваших стилей ...

    {
        test: /\.s?css$/,
        use: [
            loader: MiniCssExtractPlugin.loader,
            {
                loader: "css-loader",
                options: { sourceMap: true }
            },
            {
                loader: "sass-loader",
                options: { sourceMap: true }
            }
        ]
    }