Webpack 4 - 样式加载器/url 不起作用

Posted 2023-03-06

【中文标题】Webpack 4 - 样式加载器/url 不起作用

【英文标题】：Webpack 4 - Style-loader/url not working

【发布时间】：2018-12-07 09:53:42

【问题描述】：

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

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

所以我抓住了docs 并阅读了如何改用单个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 文件吗？

我不能在我的开发环境中使用 mini-css-extract，因为我正在使用 HMR。我已经在我的 prod 环境中进行了这项工作。

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

顺便说一下，我在index.js 中导入我的css；

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

【问题讨论】：

“HRM”是什么意思/代表什么？

抱歉，这里打错了。我的意思是 HMR，热模块更换。

【参考方案1】：

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

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

你可以定义以下常量：

// Configuring PostCSS loader
const postcssLoader = 
    loader: 'postcss-loader',
    options: 
        ident: 'postcss',
        plugins: [
                // Write future-proof CSS and forget old preprocessor specific syntax.
                // It transforms CSS specs into more compatible CSS so you don’t need to wait for browser support.
                require('postcss-preset-env')()
        ]
    
;

// Configuring CSS loader
const cssloader = 
    loader: 'css-loader',
    options: 
       importLoaders: 1
    
;

然后在您的 SASS 加载程序部分中，您可以使用以下内容：

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

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

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

现在假设您的条目部分如下所示：

    entry: 
        app: 'index.js'
    

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

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

htmlWebpackPlugin 和 HtmlWebpackIncludeAssetsPlugin

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

【参考方案2】：

我也遇到过类似的webpack问题，找了半天找到了结合几个插件的解决方案：

这是我的结果配置：（作为奖励，它保留了您的 sass 源图；））

watch: true,
mode: 'development',
devtool: 'source-map',
plugins: [
    new MiniCssExtractPlugin(
        filename: "[name].css", //make sure you use this format to prevent .scss extention in the hot reload file
        chunkFilename: "[id].css"
    )
],
module: 
    rules: [
        
            test: /\.scss$/,
            use: [
                'css-hot-loader', //5. this will hot load all the extracted css.
                MiniCssExtractPlugin.loader, //4 this will extract all css
                
                    loader: "css-loader", //3. this is where the fun starts
                    options: 
                        sourceMap: true
                    
                ,
                
                    loader: "postcss-loader", //2. add post css
                    options: 
                        sourceMap: true
                    
                ,
                
                    loader: "sass-loader", //1 . you can ingore the globImporter
                    options: 
                        importer: globImporter(),
                        includePaths: ["node_modules"],
                        sourceMap: true
                    
                
            ]
        ,
    ]