Webpack 4 - 样式加载器/ URL无法正常工作

Question

我正在设置我的webpack并且它运行良好,但在开发中它正在为我编译的scss样式表提供内联而不是使用URL.

module: {
    rules: [
        {
            test: /\.scss$/,
            use: [
                { loader: "style-loader"},
                { loader: "css-loader" },
                { loader: 'postcss-loader',
                    options: {
                        plugins: () => [require('autoprefixer')]
                    }
                },
                { loader: "sass-loader" }
            ]
        }
    ]
}

所以我抓住了文档并阅读了如何使用单个CSS文件.我将我的webpack配置更新为以下内容,因为所有加载器都以相反的顺序运行,这应该可以正常工作;

module: {
    rules: [
        {
            test: /\.scss$/,
            use: [
                { loader: "style-loader/url"}, 
                { loader: "file-loader" },
                { loader: "css-loader" },
                { loader: 'postcss-loader',
                    options: {
                        plugins: () => [require('autoprefixer')]
                    }
                },
                { loader: "sass-loader" }
            ]
        }
    ]
}

它导致没有错误,并将以下样式表插入到我的标题中;

<link rel="stylesheet" type="text/css" href="6bbafb3b6c677b38556511efc7391506.scss">

你可以看到它正在创建一个scss文件,而我期待一个.css文件.我尝试移动文件加载器,但这也不起作用,导致几次崩溃.知道如何把它变成一个工作的CSS文件？

我不能,因为我使用HMR在我的dev ENV使用迷你CSS-提取物.我已经把这个工作放在了我的生产环境上.

更新:删除css-loader时,它会编译并显示我的css应用于页面.但是当我检查元素时,所有内容都在第1行,并且无法找到它所引用的文件

index.js顺便说一句,我是这样导入我的CSS 的;

import '../css/styles.scss';

Answer 1

您可以使用以下命令为 webpack 4 安装 extract-text-webpack-plugin：

\n\n

npm i -D extract-text-webpack-plugin@next

\n\n

您可以定义以下常量：

\n\n

// Configuring PostCSS loader\nconst postcssLoader = {\n    loader: 'postcss-loader',\n    options: {\n        ident: 'postcss',\n        plugins: [\n                // Write future-proof CSS and forget old preprocessor specific syntax.\n                // It transforms CSS specs into more compatible CSS so you don\xe2\x80\x99t need to wait for browser support.\n                require('postcss-preset-env')()\n        ]\n    }\n};\n\n// Configuring CSS loader\nconst cssloader = {\n    loader: 'css-loader',\n    options: {\n       importLoaders: 1\n    }\n};\n

\n\n

然后在 SASS 加载器部分，您可以使用以下内容：

\n\n

ExtractTextPlugin.extract({\n    use: [cssloader, postcssLoader, 'sass-loader']\n})\n

\n\n

然后在插件部分，您需要使用以下内容：

\n\n

new ExtractTextPlugin({\n    filename: 'css/[name].css'\n)\n

\n\n

现在假设您的输入部分如下所示：

\n\n

    entry: {\n        app: 'index.js'\n    }\n

\n\n

生成的 CSS 将命名为 app.css 并放置在 css 文件夹中。

\n\n

用于处理这些类型的帖子创建操作的另一个有用的插件是：

\n\n

HtmlWebpackPlugin 和 HtmlWebpackIncludeAssetsPlugin

\n\n

将这些插件与 extract-text-webpack-plugin 一起使用可为您提供很大的灵活性。

\n