Webpack配置编译SCSS

最新推荐文章于 2024-09-22 09:38:42 发布

justforuse

最新推荐文章于 2024-09-22 09:38:42 发布

阅读量8.5k

点赞数

分类专栏： html/css 文章标签： webpack scss

本文链接：https://blog.csdn.net/u014291497/article/details/88360321

版权

本文主要介绍了如何在不使用框架的环境下，仅针对SCSS文件进行Webpack配置编译。通过解决Webpack无法识别SCSS的特殊语法问题，提供了一套针对性的Webpack配置方案。

摘要由CSDN通过智能技术生成

原文地址： https://justforuse.github.io/blog/zh-cn/2019/03/webpack-compile-scss/

现在框架都提供了一套完整的编译配置，比如Vue;

有时只是需要编译scss文件，在使用gulp的方式时遇到了无法识别SCSS的~语法的问题，其实也可以通过一些配置来解决，只是觉得既然webpack是主流，那不妨总结一套专门编译scss的配置

webpack.config.js

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const path = require("path")
module.exports = {
  entry: './packages/src/main.scss',
  output: {
    path: path.resolve(__dirname, 'lib')
  },
  module: {
    rules: [
      // Extracts the compiled CSS from the SASS files defined in the entry
      {
        test: /\.scss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader
          },
          {
            // Interpret