Webpack sass для css указывает конкретную папку?

Я просматривал документы и проверял вопросы других людей, но я не могу найти простой ответ на то, как скомпилировать весь мой sass в простой файл css и указать каталог, в который я хочу вывести результирующий файл css.

Для краткого контекста: у меня есть общедоступный каталог с каталогом таблиц стилей и каталогом сборки. webpack компилирует приложение в сборку, и я хотел бы, чтобы sass скомпилировал style.css в каталог таблиц стилей.

Вот скриншот моего общедоступного каталога:

общедоступный каталог

Я хотел бы иметь возможность сделать что-то подобное в моем webpack.config.js (для краткости показан только соответствующий код):

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

...

// To be called in plugins:
const cssOutput = new ExtractTextPlugin('./public/stylesheets/style.css');

внутренние загрузчики модулей:

  {
    test: /\.scss$/,
    loader: ExtractTextPlugin.extract('style-loader', 'css-loader!sass-loader'),
  },

В плагинах:

  plugins: [
    .
    .
    .
    cssOutput,
  ],

Я хотел бы иметь доступ к выходному файлу с помощью этой строки в моем файле index.html, расположенном в общедоступном каталоге:

  <link rel="stylesheet" href="/stylesheets/style.css" />

В настоящее время я делаю это с помощью gulp, и он отлично работает, я просто пытаюсь перевести все в веб-пакет. Любая помощь будет принята с благодарностью!


webpack sass sass-loader
person DaveCodes    schedule 24.08.2016    source источник

Ответы (4)


arrow_upward
2
arrow_downward

Оказывается, вы можете просто установить выходной файл следующим образом:

const cssOutput = new ExtractTextPlugin('../stylesheets/style.css', { allChunks: true });

Я сделал ошибку нуба, забыв добавить:

require('_scss/style.scss');

в моем файле index.jsx.

Для тех, кто сталкивается с этой проблемой, у меня все еще были проблемы со шрифтами и изображениями, поэтому внутри загрузчиков модулей в webpack.config.js мне пришлось добавить:

  {
    test: /\.(eot|woff|woff2|ttf|svg|png|jpe?g|gif)(\?\S*)?$/,
    loader: 'file',
  },

и поскольку это выводит все в мой каталог сборки, я просто изменил css, чтобы выводить все в каталог сборки, чтобы предотвратить ошибки пути. Я изменил это на это:

const cssOutput = new ExtractTextPlugin('style.css', { allChunks: true });

Надеюсь, это поможет кому-то еще, кто сталкивается с такой проблемой!

person DaveCodes    schedule 01.09.2016

arrow_upward
1
arrow_downward

Работа для меня::

webpack.config.js

module.exports = {
   entry: ['./src/app.ts', './src/sass/style.scss'],
   module:{
          rules: [
          {
            test: /\.ts$/,
            use: 'ts-loader',
            include: [path.resolve(__dirname, 'src', 'src/class')]
          },
          {
            test: /\.scss$/,
            use: [
            {
              loader: 'file-loader',
              options: {
                name: '/css/[name].css'
              }
             },
             {
               loader: 'extract-loader'
             },
             {
               loader: 'css-loader?-url'
             },
             {
               loader: 'postcss-loader'
             },
             {
               loader: 'sass-loader'
             }
           ],
           include: [path.resolve(__dirname, 'src/sass')]
         }
     ]
 },
 output: {
     filename: 'js/app.js',
     path: path.resolve(__dirname, 'public')
  }
}

postcss.config.js

module.exports = {
 plugins: {
    'autoprefixer': {}
 }
}

package.json

{
  "name": "tsscript",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
  "nov": "webpack",
  "test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
  "autoprefixer": "^9.8.5",
  "css": "^3.0.0",
  "css-loader": "^3.6.0",
  "extract-loader": "^5.1.0",
  "postcss-loader": "^3.0.0",
  "sass": "^1.26.10",
  "sass-loader": "^9.0.2",
  "style-loader": "^1.2.1",
  "ts-loader": "^8.0.0",
  "typescript": "^3.9.6",
  "webpack": "^4.43.0",
  "webpack-cli": "^3.3.12"
 }
}

Привязка каталога:

введите здесь описание изображения

person Subhankar Jana    schedule 15.07.2020

arrow_upward
0
arrow_downward

Взгляните на https://www.npmjs.com/package/extract-text-webpack-plugin? вам, вероятно, это понадобится.

person highFlyingSmurfs    schedule 25.08.2016
comment
Спасибо за ответ! Я уже использовал это, но все еще сталкивался с проблемами. Думаю, теперь я понял. - person DaveCodes; 01.09.2016

arrow_upward
0
arrow_downward

Последнее решение, вы можете использовать mini-css-extract-plugin, css-loader и sass-loader. mini-css-extract-plugin может создать файл CSS для каждого файла JS, содержащего CSS.

Установите зависимости:

npm i -D mini-css-extract-plugin css-loader sass-loader

Например, ваш основной JS-файл, содержащий стиль, называется ./src/index.js:

...
import './src/style.scss';
...

Настройте webpack.config.js:

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

module.exports = {
  ...
  entry: {
    main: './src/index.js',
  },
  plugins: [
    new MiniCssExtractPlugin(),
  ],
  ...
  module: {
    rules: [
      ...
      {
        test: /\.s[ac]ss$/i,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          "sass-loader",
        ],
      },
      ...
    ]
  },
  resolve: {
    modules: ["node_modules", path.resolve(__dirname, "src")],
    extensions: ['.js', '.scss', ...]
  }
}

Затем вы можете проверить свой выходной каталог, там будет main.css. Плагин установил имя по умолчанию на [name].css (имя записи).

person Luki B. Subekti    schedule 17.02.2021