Question

这是我的文件夹结构：

webpack.config.js
- sass
-- _partials.scss
-- style-1.scss
-- style-2.scss

我想要Webpack自动将文件检测到我的sass文件夹中并创建具有相同名称的css文件，请注意，有一些sass局部文件要进行：

webpack.config.js
- sass
-- _partials.scss
-- style-1.scss
-- style-2.scss
- css
-- style-1.css
-- style-2.css

我想用html链接的标签加载特定的CSS文件。我不知道根据我的webpack配置文件将sass条目和css输出文件夹放在哪里：

module.exports = {
    context: __dirname + '/js/react/entry',
    entry: {
        page1: './page1.js',
        page2: './page2.js',
    },
    output: {
        filename: '[name].js',
        path: __dirname + '/js/react/build'
    },
    module: {
        rules: [
            {
                test: /.jsx?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['env', 'react']
                }
            },
            {
                test: /\.scss$/,
                use: [
                    "sass-loader"
                ]
            }
        ]
    }
};

感谢您的帮助！

Answer 1

Webpack的工作方式是从定义的入口点开始爬网源，然后从那里构建应用程序。如果未将这些文件定义为入口点，则Webpack将不会在构建中包括它们...除非您从.js文件中引用了这些文件。我实际上会建议您这样做：在.js文件的顶部，导入相对的.scss文件。完成此操作后，Webpack将看到它并尝试使用sass-loader处理它。

Answer 2

不是，我真的想让独立的CSS文件加载到其他页面的链接的html标签中。

根据sass-loader的文档，sass-loader是基于node-sass的。我想要的结果像我的webpack中最简单的node-sass命令一样：

node-sass sass -o css

Webpack sass-loader入口/输出文件夹的

2 个答案: