繁体   English   中英

用于输出多个已编译 SCSS 文件的简单 Webpack 配置

Simple Webpack Configuration for Outputting multiple Compiled SCSS files

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我有一个项目正在使用与我的操作系统不兼容的 scss 资源编译器,所以我想用 webpack 替换它,我正在寻找一个简单的配置来模仿下面的 json 文件当前不兼容的编译器使用

[
 {
    "outputFile": "wwwroot/css/bootstrap.custom.css",
    "inputFile": "wwwroot/css/bootstrap.custom.scss"
  },
  {
    "outputFile": "wwwroot/css/AdamsTaxUIstyle.css",
    "inputFile": "wwwroot/css/AdamsTaxUIstyle.scss"
  },
  {
    "outputFile": "wwwroot/scss/_colors.css",
    "inputFile": "wwwroot/scss/_colors.scss"
  },
  {
    "outputFile": "wwwroot/scss/_mixins.css",
    "inputFile": "wwwroot/scss/_mixins.scss"
  }
]

所以我的问题是我将如何编写一个简单的 webpack.config.js 来模仿这个? 我试图以此为起点,尽管我想省略与 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'
                ]
            }
        ]
    }
};
问题暂未有回复.您可以查看右边的相关问题.
2 Webpack配置创建多个文件

我试图分别生成两个css文件(浅色和深色主题),这样我就可以为我的应用程序构建一个主题切换器,以根据用户偏好加载任一样式。 似乎没有错误地使这个工作。 实际上文件是按照预期创建的,但我只想将其中一个注入到我的文档头中,只要我允许两者都被注入,一切都有效。 我试图使用chunk或e ...

3 Grunt:SCSS文件未编译

我正在尝试用grunt编译scss文件。 使用这些模块 grunt-contrib-sass grunt-contrib-watch grunt-contrib-concat 话虽这么说,我所有的常规css文件都被编译成我的主css文件,但是我的.scss文件 ...

7 如何基于Webpack中的SCSS变量文件生成多个CSS文件

抱歉,我的标题令人困惑。 说我有3个文件,分别是theme-1.scss , theme-2.scss和theme-3.scss 每个文件具有相同的SCSS变量,只是具有不同的值(不同的颜色十六进制代码等) 有没有办法让Webpack编译整个CSS 3次,每个主题文件1次-这样 ...

8 Webpack连接scss文件

在上一个项目中,我使用gulp将所有文件夹中的所有.scss文件合并为一个.scss文件。 接下来,我使用sass将.scss文件编译为css。 现在,我想使用Webpack创建完全相同的“构建过程”。 不幸的是,Webpack不理解**和* .scss。 是否有解决方案来获 ...

9 如何使用 webpack 使 SCSS 编译为 CSS?

我有一个反应项目,并使用 SCSS 进行样式设置。 到目前为止,我在 Chrome Mac 中进行测试,甚至没有注意到 webpack 实际上并没有将 SCSS 文件编译成 CSS,因此它们保持不变。 但它工作正常。 尝试在 Firefox 上进行测试,它可以读取根级 styles,但不能读取嵌套 ...

10 限制编译的SCSS文件数

有一个包含4个SCSS文件的文件夹,我只想正常编译其中一个。 其他的是该SCSS文件的主题版本。 这是我指南针的咕unt声部分。 有谁知道我怎么能做到这一点? ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM