admin管理员组

文章数量:1405371

Any webpack experts here? I'm trying to figure out how to get Webpack to compile my SCSS file to a CSS file

I've got a project with an index.html and a CSS file linked in the head, just the standard way. I'm using Webpack to bundle the React code in this project, but it also contains some Backbone code and other things i will replace over time, so the CSS needs to stay linked in the head at the moment. I'm not importing this CSS file vis JS in my React components.

When I edit say, example.scss I want webpack to compile it down and generate me a new example.css Can Webpack do something like this? I've done a ton of digging, and can't seem to find a solution. Everything seems to involve CSS imported into JS components.

The previous setup for this project used Grunt, which accomplished this easily. I wonder if maybe I need two processes. One to compile React code and another just to compile SCSS and generate a new CSS file.

Thanks in advance!

Any webpack experts here? I'm trying to figure out how to get Webpack to compile my SCSS file to a CSS file

I've got a project with an index.html and a CSS file linked in the head, just the standard way. I'm using Webpack to bundle the React code in this project, but it also contains some Backbone code and other things i will replace over time, so the CSS needs to stay linked in the head at the moment. I'm not importing this CSS file vis JS in my React components.

When I edit say, example.scss I want webpack to compile it down and generate me a new example.css Can Webpack do something like this? I've done a ton of digging, and can't seem to find a solution. Everything seems to involve CSS imported into JS components.

The previous setup for this project used Grunt, which accomplished this easily. I wonder if maybe I need two processes. One to compile React code and another just to compile SCSS and generate a new CSS file.

Thanks in advance!

  • javascript
  • css
  • webpack
  • sass
Share Improve this question asked Mar 9 at 7:03 Anton EmeryAnton Emery 951 gold badge4 silver badges9 bronze badges
Add a comment  | 

1 Answer 1

Reset to default 0

You can use the html-bundler-webpack-plugin. The plugin resolves all the source files of the assets referenced directly in the HTML and ensures the generated HTML contains the correct output URLs of resources after Webpack processes them.

For example, there is a index.html file:

<!doctype html>
<html lang="en">
  <head>
    <title>React App</title>
    <!-- use relative path or webpack alias to source file -->
    <link href="./images/favicon.ico" rel="shortcut icon" />
    <!-- use relative path or webpack alias to source file -->
    <link href="./scss/style.scss" rel="stylesheet" />
  </head>
  <body>
    <div id="root"></div>
    <!-- use relative path or webpack alias to source file -->
    <script src="./index.jsx"></script>
  </body>
</html>

Webpack config:

const path = require('path');
const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');

module.exports = {
  mode: 'development',
  output: {
    path: path.join(__dirname, 'dist/'),
    clean: true,
  },
  plugins: [
    new HtmlBundlerPlugin({
      entry: {
        // add here your pages
        index: './src/index.html', // => dist/index.html
      },
      js: {
        filename: 'js/[name].[contenthash:8].js', // JS output filename
      },
      css: {
        filename: 'css/[name].[contenthash:8].css', // CSS output filename
      },
    }),
  ],
  module: {
    rules: [
      // compile JS/JSX
      {
        test: /\.(m?js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            cacheDirectory: true,
            presets: [['@babel/preset-react']],
          },
        },
      },
      // compile SCSS
      {
        test: /\.(scss)$/,
        use: ['css-loader', 'sass-loader'],
      },
      // handles images
      {
        test: /\.(ico|png|jpe?g|svg)/,
        type: 'asset/resource',
        generator: {
          filename: 'img/[name].[hash:8][ext]',
        },
      },
    ],
  },
  // enable live reload
  devServer: {
    static: path.join(__dirname, 'dist'),
    watchFiles: {
      paths: ['src/**/*.*'],
      options: {
        usePolling: true,
      },
    },
  },
};

The generated HTML file contains output URLs to compiled CSS, JS, images:

<!doctype html>
<html lang="en">
  <head>
    <title>React App</title>
    <link href="img/favicon.edda23bf.ico" rel="shortcut icon" />
    <link href="css/style.0859dc84.css" rel="stylesheet" />
  </head>
  <body>
    <div id="root"></div>
    <script src="js/index.0022c990.js"></script>
  </body>
</html>

Here is the working example React with Webpack on stackblitz.

P.S. you can create a repo on GitHub then I can help you to configure Webpack.

本文标签： javascriptUsing Webpack to compile SCSS to CSSStack Overflow

版权声明：本文标题：javascript - Using Webpack to compile SCSS to CSS - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744876061a2629922.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。