时间戳

首页 > 解决方案 > WEBPACK - 如何从 javascript 导入中获取单个构建文件

javascript - WEBPACK - 如何从 javascript 导入中获取单个构建文件

问题描述

我有这个 javascript

import cards './cards-grid.scss' 
import key_point from './key-point.scss'
import contact_form from './contact-form.scss'

在我的 webpack 中有这个条目和这个输出

entry: path.join(__dirname, '../scss/blocks/blocks.js'),

 output: {
   filename: 'block.bundle.js',
   path: path.join(__dirname, '../../assets/blocks')
},

显然，我将所有 CSS 都放在一个文件中，但我想为每个导入获取一个 css 文件，所以：

assets/blocks/cards-grid.min.css
assets/blocks/key-point.min.css
assets/blocks/contact-form.min.css

你认为有可能吗？有没有人有同样的需求？谢谢。

标签： javascriptcsswebpacksass

解决方案

为什么要在 js 中导入样式？使用css-loader和sass-loader：

module: {
        rules: [{
            test: /\.scss$/,
            use: [
                "style-loader", // creates style nodes from JS strings
                "css-loader", // translates CSS into CommonJS
                "sass-loader" // compiles Sass to CSS, using Node Sass by default
            ]
        }]
    }

或者您需要添加[name]到输出文件名中。然后它不会将所有内容捆绑到一个文件中，但这不适用于样式（.scss 文件）：

output: {
   filename: '[name].js',
   path: path.join(__dirname, '../../assets/blocks')
},

推荐阅读