时间戳

首页 > 解决方案 > Webpack sass 到 css 并保留文件夹结构

webpack - Webpack sass 到 css 并保留文件夹结构

问题描述

我需要使用保留文件夹结构将 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

解决方案

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'
                ]
            }
        ]
    }
};

包.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

推荐阅读