标签: sass-loader

我正在尝试在 Nuxt.js 中使用 sass 包而不是 node-sass 。我找到了这样的配置；

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      sass: {
        implementation: require('sass'), // This line must in sass option
      },
    },
  }
}

但我不知道将该代码放在 Nuxt.js 中的何处。

我目前正在学习 sass/scss，并且正在尝试为实践项目设置 webpack 配置。所以我查找了我需要的工具和技术，一些资源建议我使用“node sass、sass-loader 和 css-loader”（webpack 文档），而另一个资源建议我使用 post-CSS 而不是 css-loader。我想知道其中的区别。

这是我第一次使用Webpack，我不明白为什么未加载我的sass文件（.scss）。我花了整个下午的时间进行尝试和搜索，但是我不明白我的代码有什么问题。

webpack.config.js

module.exports = {
   entry: "./main.js",
   output: {path: __dirname, filename: "bundle.js"},
   module: {
     loaders: [
       {
         test: /.jsx?$/,
         loader: "babel-loader",
         exclude: /node_modules/,
         query: {
           presets: ["es2015", "react"]
         }
       },
       {
         test: /\.css$/,
         loader: "css-loader!autoprefixer-loader"
       },
       {
         test: /\.scss$/,
         loader: "css-loader!sass-loader"
       }
     ]
   }
 };

package.json依赖项：

//...
"dependencies": {
    "react": "^0.14.7",
    "react-dom": "^0.14.7",
    "react-redux": "^4.4.0",
    "redux": "^3.3.1",
    "webpack-dev-server": "^1.14.1"
  },
  "devDependencies": {
    "autoprefixer-loader": "^3.2.0",
    "babel-core": "^6.6.5",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "css-loader": "^0.23.1",
    "node-sass": …

我想在我的ReactJS应用程序中使用.scss作为我的样式表.我有一个webpack配置文件css-loader , sass-loader, and style-loader.

我能够将css导入到我的app.js文件中import './test.css'但是我没有运气import './test.scss'吗？

这是我的package.json:

  "dependencies": {
    "react": "^15.0.2",
    "react-dom": "^15.0.2"
  },
  "devDependencies": {
    "babel-core": "^6.7.7",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "babelify": "^7.3.0",
    "checkbox.css": "^1.1.1",
    "css-loader": "^0.23.1",
    "eslint": "^2.9.0",
    "eslint-plugin-react": "^5.0.1",
    "html-webpack-plugin": "^2.16.1",
    "node-sass": "^3.7.0",
    "raw-loader": "^0.5.1",
    "sass-loader": "^3.2.0",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.0",
    "webpack-dev-server": "^1.14.1"
  }

我的网站:

  module:{
    loaders:[
      {test:/\.js$/,exclude: /node_modules/, loader: 'babel-loader'},
      {test:/\.scss$/, loaders:['style','css','sass']},
      // {test:/\.css$/, loader: 'style!css', exclude: /node_modules/},
      {test:/\.html$/, loader: 'raw-loader'}
    ]
  },

****第3行被注释掉,因为我想出了如何加载CSS.**

在我的app.js

我已经尝试过require("!style!css!sass!./styles.scss"); …

当尝试设置SCSS以使用Webpack在我的React应用程序上运行样式时，出现以下错误：

Module not found: Error: Can't resolve 'style' in '/Users/sachinkaria/Workspace/GC' @ ./app/index.js 4:0-29 @ multi ./app/index.js'

并在浏览器中：

Uncaught Error: Cannot find module "/styles/main.scss"

我的webpack.config.js配置如下：

var HtmlWebpackPlugin = require('html-webpack-plugin');-
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
  template: __dirname + '/app/index.html',
  filename: 'index.html',
  inject: 'body'
});

module.exports = {
  entry: [
    './app/index.js'
  ],
  output: {
    path: __dirname + '/dist',
    filename: "index_bundle.js"
  },
  module: {
    loaders: [
      {test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"},{
            test: /\.scss$/,
            loaders: ['style', 'css', 'sass']
        }
    ]
  },
  plugins: [HTMLWebpackPluginConfig]
}; …

我正在将Webpack与一些插件和加载程序结合使用，以获取src /文件夹并构建dist /文件夹。url-loader（当图像大于特定限制时回退到文件加载器）正在将它在我的html和scss文件中找到的图像输出到预期的正确目录。但是，它会更改那些文件中的相对路径，从而输出具有错误路径的css文件。

文件结构：

src/
    index.html
    assets/
        js/
            index.js
        scss/
            style.scss
        img/
            pic.jpg
            background.jpg

dist/
    index.html
    assets/
        js/
            index.js
        css/
            style.css
        img/
            pic.jpg
            background.jpg

如您所见，我的dist /文件夹镜像了我的src /文件夹，除了scss被编译为css。

src / index.js导入index.html和style.scss，以便那些文件可以由webpack解析，并且其中的任何图像都可以由url-loader处理：

index.js

import '../../index.html';
import '../scss/style.scss';

style.scss使用相对路径在主体上设置背景图像：

style.scss

body {
    background: url('../img/background.jpg');
}

index.html只是使用相对路径显示图像：

index.html

<img src="./assets/img/pic.jpg" alt="pic">

我使用HtmlWebpackPlugin在我的html文件中进行复制，因为它允许我指定要自动包含为脚本标记的块。对于CSS，我要么使用开发中的style-loader将其注入html文件，要么使用MiniCssExtractPlugin将其提取到生产环境中的自己的文件中。

但是，当webpack解析index.html和style.scss时，相对路径分别替换为'assets / img / pic.jpg'和'assets / img / backgorund.jpg'。这不会破坏index.html中的路径，因为它实际上是相同的相对路径，但这显然是style.css的问题。如何停止url-loader更改相对路径，或仅生成正确的路径？另请注意，在开发中使用样式加载器将css注入html时，该路径有效，因为该路径是相对于html文件的。理想情况下，webpack应该能够生成正确的相对路径，具体取决于我是在生产中提取css还是在开发中注入css。

我试过使用resolve-url-loader，指定publicPath和outputPath，当然也可以在线搜索答案，但是运气不佳。

webpack.config.js

const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

const …

我是第一次设置 Webpack，但我陷入了 Sass 部分。

我有这样的文件结构：

• 源代码（目录）
  • 样式（目录）
    • 实用程序（目录）
      • 测试.scss
  • index.scss（位于 src 的根目录中）
  • index.js（位于 src 的根目录中）

test.scss里面有这个：

$blue: dodgerblue;

body {
  background-color: $blue;
}

index.scss有这个：

@import url("./styles/utilities/test.scss");

我的入口文件index.js如下，如果我在 #1 中使用导入，它可以工作，scss 可以正确编译，但如果我在 #2 中使用导入，它就无法编译。

1. import './styles/utilities/test.scss';
2. import './index.scss';

#1 的输出如下所示：

body {
  background-color: dodgerblue;
}

#2 的输出如下所示：

body {
  background-color: $blue;
}

为什么会发生这种情况？最终，我希望能够将样式表组织在不同的文件夹中，并能够将它们全部编译成 css。

我的 webpack.config.js 看起来像这样：

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'assets'),
  }, …

所以我有以下字体设置:

$font-path: '~@/assets/fonts/';
@font-face {
    font-family: 'mainFont';
    font-weight: 300;
    font-style: normal;
    src: url('#{$font-path}mainFont/mainFont.eot') format('eot'),
    url('#{$font-path}mainFont/mainFont.woff2') format('woff2'),
    url('#{$font-path}mainFont/mainFont.woff') format('woff'),
    url('#{$font-path}mainFont/mainFont.ttf') format('truetype'),
    url('#{$font-path}mainFont/mainFont.svg#mainFont') format('svg');
}

构建(使用vue.js webpack btw)按预期工作.该应用程序将无法加载字体.该src网址指向错误的目录.当$font-path相对于输出文件(如建议)更改到文件夹时,构建失败,因为它找不到字体.

我有一个.scss文件，我在其中使用了背景图像 ( background-image: url('../../../image.png'))。该file-loader的WebPack插件监测的形象，并将其复制当我建立我的应用程序，这是伟大的。

问题是我有相当多的图像和相当多的.scss文件，而且我的代码中的所有相关导入都非常混乱。

有什么方法可以告诉我，file-loader或者sass-loader如果我这样做，background-image: url('@alias/image.png')我指的是文件夹在哪里image.png？

更新- 主线程帖子底部的解决方案 -

样式.scss

@import "./material";

$pace-red: #bb2d1c;
$green: #008000;
$red: #f00;
$black: #000;

body {
  margin: 0;
}
...

自定义主题 - Material.scss

@use '~@angular/material' as mat;
@import '@angular/material/theming';
@include mat.core();

$core-app-primary: mat.define-palette(mat.$red-palette, A700);
$core-app-accent: mat.define-palette(mat.$blue-palette, 500);
$core-app-warn: mat.define-palette(mat.$amber-palette, 800);
$core-app-theme: mat.define-light-theme($core-app-primary, $core-app-accent, $core-app-warn);

@include mat.all-component-themes($core-app-theme);
...

我收到一条错误消息，指出由于 @use，它无法构建模块。我也尝试过使用@use '~@angular/material' as mat;，但这并没有改变错误。

包.json

{
  "name": "xxxxx-core-cli",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng-high-memory": "node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng",
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test", …