代码之家 › 专栏 › 技术社区 › Knows Not Much

Web包未为SCS创建CSS文件

webpack css

Knows Not Much · 技术社区 · 6 年前

这是我的包裹。json

{
  "name": "login-ts-react",
  "version": "1.0.0",
  "main": "webpack.config.js",
  "license": "MIT",
  "scripts": {
    "start": "webpack-dev-server"
  },
  "dependencies": {
    "react": "^16.3.2",
    "react-bootstrap": "^0.32.1",
    "react-dom": "^16.3.2"
  },
  "devDependencies": {
    "style-loader": "^0.21.0",
    "mini-css-extract-plugin": "^0.4.0",
    "@types/react": "^16.3.11",
    "@types/react-bootstrap": "^0.32.8",
    "@types/react-dom": "^16.0.5",
    "awesome-typescript-loader": "^5.0.0-1",
    "css-loader": "^0.28.11",
    "html-webpack-plugin": "^3.2.0",
    "import-glob-loader": "^1.1.0",
    "node-sass": "^4.9.0",
    "postcss-loader": "^2.1.4",
    "raw-loader": "^0.5.1",
    "sass-loader": "^7.0.1",
    "source-map-loader": "^0.2.3",
    "typescript": "^2.8.1",
    "webpack": "^4.5.0",
    "webpack-cli": "^2.0.14",
    "webpack-dev-server": "^3.1.3",
    "webpack-env": "^0.8.0"        
  }
}

这是我的网页。配置。js公司

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const devMode = process.env.NODE_ENV !== 'production'

module.exports = {
  entry: './src/index.tsx',
  mode: 'development',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: 'awesome-typescript-loader'
      },
      {
        enforce: 'pre',
        test: '/\.jsx?$/',
        loader: 'source-map-loader'
      },
      {
        test: /\.s?[ac]ss$/,
        use: [
          devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader',
        ],
      }      
    ]      
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html'
    }),
    new MiniCssExtractPlugin({
      filename: devMode ? '[name].css' : '[name].[hash].css',
      chunkFilename: devMode ? '[id].css' : '[id].[hash].css'
    })
  ],
  devtool: 'source-map',
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.scss']
  }
}

我的理解是,当我运行应用程序并从浏览器访问时,我应该看到一个捆绑包。js和捆绑包。css。

当我运行应用程序并看到chrome开发工具的网络选项卡时,我看到了捆绑包。js,但没有捆绑包。css。

我的项目中有以下SCSS文件

$header-img: image-url('../images/image.gif', false, false);
.bg {
  background-image: $header-img;
  width: 100%;
  height: 100vh;
}

为什么webpack没有为我发送任何CSS文件?

编辑::根据下面的建议,我在索引中添加了这一行。tsx文件

require('../styles/style')

现在没有错误。但仍然没有*。css文件在网络中输出。

2 回复 | 直到 6 年前

Nicolas S. 6 年前

你确定要导入你的main吗。中的scss文件/src/索引。tsx?

e、 g:

require('./main.scss');

Knows Not Much 6 年前

我一直在尝试多种排列组合,最后是这个网页。配置。js为我工作。有了这个网页配置,我可以看到main。浏览器网络选项卡中的css。

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const devMode = process.env.NODE_ENV !== 'production'

module.exports = {
  entry: './src/index.tsx',
  mode: 'development',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: 'awesome-typescript-loader'
      },
      {
        enforce: 'pre',
        test: '/\.jsx?$/',
        loader: 'source-map-loader'
      },
      {
        test: /\.scss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader
          },
          {
            loader: 'css-loader',
            options: {
              sourceMap: true
            }
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true,
              includePaths: ["styles/"]
            }
          },
        ],
      }      
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html'
    }),
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css'
    })
  ],
  devtool: 'source-map',
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.scss']
  }
}