Question

webpack新手。试图让sass-loader与我的反应项目一起玩得很好，已经按照教程进行操作。配置似乎是正确的，但结果始终是＆＃34;无法解决＆＃39; sass-loader＆＃39;＆＃34;。

我怀疑这是一个非常明显的错误，但没有多少搜索它或谷歌搜索引导我到它。任何帮助表示赞赏。

错误

ERROR in ./ui/index.js
Module not found: Error: Can't resolve 'sass-loader' in '/root/src'
 @ ./ui/index.js 19:0-33
 @ multi webpack-hot-middleware/client?reload=true babel-polyfill ./ui/index.js

到目前为止我做了什么（关于所说的预先存在的反应项目）：

npm i --save-dev node-sass sass-loader

package.json，位于devDependencies

下

"node-sass": "^4.7.2",
"sass-loader": "^6.0.6",
"webpack": "~2.2.1",
"webpack-dev-middleware": "~1.12.0",
"webpack-hot-middleware": "~2.20.0",
"webpack-node-externals": "~1.6.0"

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { HashRouter } from 'react-router-dom';
import App from './src/App';

require('./src/styles/main.scss');

ReactDOM.render(<HashRouter><App /></HashRouter>, 
document.getElementById('root'));

webpack.config.react.js：

const path = require('path');
const webpack = require('webpack');

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const sourcePath = path.join(__dirname, './ui');
const extractStyle = new ExtractTextPlugin('styles.css');

//======break to module rules=======

module: {
  rules: [
    {
      test: /\.jsx?$/,
      include: sourcePath,
      exclude: /node_modules/,
      loader: 'babel-loader',
      query: {
        presets: ['react'],
      },
    },
    {
      test: /\.scss$/,
      include: sourcePath,
      exclude: /node_modules/,
      use: extractStyle.extract('sass-loader?sourceMap'),
    },
    {
      test: /\.css$/,
      exclude: sourcePath,
      loader: extractStyle.extract('css-loader'),
    },
  ],
},

//======= break again for plugins =====

plugins: [
  extractStyle,
  new HtmlWebpackPlugin({
    template: 'ui/index.html',
    title: 'name',
  }),
  new webpack.HotModuleReplacementPlugin(),
  new webpack.NamedModulesPlugin(),
  new webpack.optimize.OccurrenceOrderPlugin(),
  new webpack.NoErrorsPlugin(),
  new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify('development'),
  }),
]

可能的混淆：这都是在开发docker容器中运行的。它已被重建，npm install再次运行。

Answer 1

转到项目并在以下两个命令下运行

npm install sass-loader -D

npm install node-sass -D

Answer 2

如上述评论 - 误报。在Docker镜像缓存和npm之间，sass-loader和node-sass模块被报告为已安装，而实际上并未安装。通常的var data = { list : ["a", "b", "c"] } var temp = {...data}; // this is now a copy not a reference和没有缓存技巧的重建修复了它。

Answer 3

对于我的nuxt应用程序，使用AWS CodePipeline（Bitbucket）部署到AWS Elastic Beanstalk。是什么帮助在“ npm install sass-loader”之前安装了脚本（这在“ npm install”中也起作用），无法确定脚本是不是最佳方法，但目前仍可以使用。

Procfile

web: npm run deploy

package.json

  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "deploy": "npm install sass-loader && npm run build && npm run start"
  }

Answer 4

使用下面的命令

npm install sass-loader -D

转到 webpack.config.js

module: {
        rules: [
           
       {     
          test: /\.scss$/,
         
            {          
                test: /\.css$/,
                use: [
                  
                  'css-loader',
                  'sass-loader'<-----------------------sass loader
                ]}
    
        ],

找不到模块：错误：无法解决＆＃39; sass-loader＆＃39;

4 个答案: