Question

使用：babel，webpack，angular 7

这是我第一次编写webpack.config文件，但在构建sass-loader / scss文件时遇到了一些问题。

我尝试将sass-loader的等级降为“ sass-loader”：“〜6.0.7”，并添加

"stylePreprocessorOptions": {
    "includePaths": [
        "src/scss"
     ]
  },

到angular.json文件，但没有任何作用。

这是我的webpack.config文件的副本：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const Dotenv = require('dotenv-webpack');
// const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
  entry: { 
        'polyfills': '@babel/polyfill',
        'app': './src/main.ts'
    },
  resolve: {
        extensions: ['.ts', '.js', '.scss', '.json', '.html']
    },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  devServer: {
      contentBase: './dist'
  },
  module: {
            rules: [
                {
                    test: /\.m?js$/,
                    exclude: /(node_modules)/,
                    use: {
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/preset-env']
                        }
                    }
                },
                {
                    test: /\.(scss|css)$/,
                    use: ["raw-loader", "sass-loader"]
                 },
                {
                    test: /\.(s?css)$/,
                    use: [
                      "style-loader" ,
                      "css-loader" ,
                      "sass-loader",
                      { 
                        loader: "to-string-loader"  
                      }
                    ]

                },
                { 
                    test: /\.(html)$/, 
                    loader: 'raw-loader',
                },
                {
                    test: /\.tsx?$/,
                    loaders: [
                      {
                        loader: 'awesome-typescript-loader',
                        options: { configFileName: 'tsconfig.json' }
                      } , 'angular2-template-loader'
                    ]
                }
            ]
        },
  plugins: [
    new HtmlWebpackPlugin({
        filename: 'index.html',
        template: './src/index.html',
    }),
    new Dotenv(),
  ]
};

我一直收到以下错误：

未捕获的错误：模块构建失败（来自   ./node_modules/sass-loader/lib/loader.js）：

//普通风格的吐司^         “”之后的CSS无效：预期为1个选择器或规则，为“ var content = requi”

./ src / app / components / shared-features / geo-charts / geo-charts.component.scss   模块构建失败（来自./node_modules/sass-loader/lib/loader.js）：

//＃chartdiv {^         “”之后的CSS无效：预期为1个选择器或规则，为“ var content = requi”

我在配置中错过了什么吗？

webpack无法构建sass-loader：“”之后的CSS无效：预期为1个选择器或规则，为“ var content = requi”

0 个答案: