Блог

Мне нужно преобразовать файлы scss в css с сохранением структуры папок. Пример:

 /saas/plugins/plugin1/file1.scss
/saas/plugins/plugin2/fileA.scss
/saas/plugins/pluginC/file3.scss
/saas/template/template1.scss
/saas/folder1/style.scss
/saas/style.scss
 

После компиляции:

 /css/plugins/plugin1/file1.css
/css/plugins/plugin2/fileA.css
/css/plugins/pluginC/file3.css
/css/template/template1.css
/css/folder1/style.css
/css/style.css
 

Как это сделать?

webpack.config.js

 const path = require('path');

module.exports = {
    entry: [
        __dirname   '/src/js/app.js',
        __dirname   '/src/scss/app.scss'
    ],
    output: {
        path: path.resolve(__dirname, 'dist'), 
        filename: 'js/app.min.js',
    },
    module: {
        rules: [
            {
                test: /.js$/,
                exclude: /node_modules/,
                use: [],
            }, {
                test: /.scss$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'file-loader',
                        options: { outputPath: 'css/', name: '[name].min.css'}
                    },
                    'sass-loader'
                ]
            }
        ]
    }
};
 

package.json

 {
  "name": "...",
  "version": "1.0.0",
  "description": "...",
  "private": true,
  "dependencies": {},
  "devDependencies": {
    "file-loader": "^5.0.2",
    "node-sass": "^4.13.1",
    "sass-loader": "^8.0.2",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10"
  },
  "scripts": {
    "build": "webpack --config webpack.config.js --mode='production'"
  },
  "keywords": [],
  "author": "...",
  "license": "ISC"
}
 

Зависимости:

 npm install --save-dev webpack webpack-cli file-loader node-sass sass-loader
 

Как запустить компиляцию JS и SCSS

 npm run build